parallax.js: bringing real movement to the web

parallax.js is a lightweight parallax engine that responds to the movements from your smartphone's gyroscope and motion detection. The tool lets you specify depths and directions that determine how your webscape responds to physical movement.

Creating layers is super simple, as documented:

Simply create a list of elements giving each item that you want to move within your parallax scene a class of layer and a data-depth attribute specifying its depth within the scene. A depth of 0 will cause the layer to remain stationary, and a depth of 1 will cause the layer to move by the total effect of the calculated motion.

Parallax.js is useable in jQuery and Zepto as a plugin, too.

MIT Licensed. Browse the source code on Github.

News Films

Our little film studio focuses on telling developer-centric stories that need to be seen.

Beyond Code: Season 3 / GopherCon 2015

 
0:00 / 0:00