Parallax.js is a beautiful engine that creates those parallax effects we’re used to see in websites, making them even more powerful than ever. It uses the motion detection option (or gyroscope) function of the user’s mobile device, so the user can tilt it and see how it works. In devices where there’s not such features ( in desktop computers and laptops, the engine identifies where the cursor is and works with it instead.

The result is a gorgeous set of smooth and organized elements that move at different speeds, creating an ambience of realism. With it you can:

– Create circular animations
– Create pendulum animations
– Apply different speed to each element
– Apply general characteristic to a group of elements

To use it, just create a list of elements. Apply the “layer” class to each one of them, and specify in the “data-depth” attribute the depth of the element within the scene. The value “0” make the element stand still, while the value “1” makes it move a lot. Play with the values in the middle and see some magic. You can activate or deactivate features to your convenience.

This tool was created by Matthew Wagerfield and it can be downloaded for free. It has a MIT license.