Nutritious Polygonal Meatball
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    parallaxypublic

    What it is

    Adds parallax effect to images and videos.

    Installation

    parallaxy.js is available as an npm package.

    npm install parallaxy --save

    Add parallaxy.min.js to the bottom of the <body> like this:

    <script src="parallaxy.min.js"></script>

    Note

    This is an very early version of parallaxy.

    How to Use

    Usage

    In this example the image will have a parallaxy effect.

    <div data-parallaxy>
        <img src="image.jpg">
        <div data-parallaxy-ignore>
            <h1>Content above</h1>
        </div>
    </div>

    After DOM change

    If the DOM has changed and you want to reset Parallaxy, just run;

    Parallaxy.refresh();

    Options

    Options must be passed via data-attributes. Append the option name to data-parallaxy-, as in data-parallaxy-speed="0.25".

    Name Type Default Description
    speed Float 0.5 Adjust parallaxy effect from 0-1 (none-max)
    ignore Boolean false Ignore parallaxy effect on this element

    Global options (data-attribute):

    Name Type Default Description
    ignoresmoothscroll Boolean null Ignore smoothMouseWheel. Place anywhere

    Browser Support

    Coming soon. Uses CSS translate2D to scale and position images.

    License

    The code is available under the MIT License.

    install

    npm i parallaxy

    Downloadslast 7 days

    36

    version

    2.0.1

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar