node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

parallaxy

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.