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


What it is

Adds parallax effect to images and videos.


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>


This is an very early version of parallaxy.

How to Use


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>

After DOM change

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



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.


The code is available under the MIT License.