wagerfield/parallax

Parallax.js is a JavaScript library that creates a layered depth effect on web pages, where elements appear to move at different speeds depending on how you tilt your phone or move your mouse. On devices with a gyroscope, it uses the physical tilt of the device to shift layers, on desktops or devices without motion sensors, mouse cursor movement drives the effect instead. The result is a subtle 3D illusion that makes backgrounds and foreground elements appear to exist at different depths. Setting it up is straightforward: you create a container element in your HTML called a scene, then place child elements inside it as layers. Each layer gets a data-depth attribute from 0 to 1 that controls how much it moves. Lower numbers mean less movement, creating the impression of being far away, while higher numbers move more, appearing closer. You can configure friction to control how smoothly the layers follow input, scale the amount of movement, invert direction, or limit how far layers can travel. It can be added to a page via a CDN link, downloaded directly, or installed through npm as parallax-js. The library has no external dependencies and works entirely in the browser.