dixonandmoe/rellax

Rellax is a small, dependency-free JavaScript library that adds parallax scrolling effects to web pages. Parallax is the visual technique where different elements on a page move at different speeds as you scroll, creating a sense of depth. Rellax makes this easy to add without requiring any JavaScript frameworks. To use it, you add a CSS class called rellax to any HTML element you want to animate, then include the Rellax script and initialize it in a single line. Each element can have a speed value set via a data attribute: a negative value makes the element scroll more slowly than the page itself (which creates a background-receding effect), and a positive value makes it scroll faster. The recommended range is -10 to 10. Rellax works on mobile devices as well as desktop. Beyond basic speed, the library supports several other options. You can set different speeds for different screen sizes (breakpoints), which is useful when the same parallax effect looks wrong on a phone versus a wide desktop screen. There is a centering mode that anchors elements relative to the viewport rather than the top of the page, which produces more predictable behavior for elements in the middle of a layout. Horizontal parallax is also available for websites that scroll sideways. A custom wrapper option lets you apply parallax relative to a specific scrolling container instead of the whole page. The library also exposes a destroy method that removes the effect and returns elements to their original positions, a refresh method that restarts it with the same settings, and a callback that fires on every scroll position change if you need to respond to it programmatically. It can be installed via npm or yarn, loaded from a CDN, or downloaded manually as a single minified file. Several production websites are listed in the README as users of the library.