markdalgleish/stellar.js

Stellar.js is a jQuery plugin that makes parallax scrolling effects easy to add to any webpage. Parallax scrolling is a visual technique where background images or page elements move at a different speed than the rest of the page as you scroll, creating a sense of depth. The project is no longer actively maintained, but its code remains available and a path exists for contributors to take over. To use it, you run a single function call against any scrollable element on the page, such as the browser window or a specific container. Stellar.js then scans that element for anything tagged with special HTML data attributes and adjusts those items' positions as the user scrolls. You can apply it to both background images and to regular page elements like divs or images. The core idea is a "ratio" value you set on each element. A ratio of 0.5 means the element scrolls at half the normal speed, while a ratio of 2 means it moves at twice the speed. This lets you layer elements at different apparent depths with minimal code. You can also set offsets, which control where each element snaps back to when its containing section reaches the edge of the viewport, allowing more complex layered compositions. For advanced setups, Stellar.js supports custom scroll property plugins. If your scrolling interface works through CSS transforms, margins, or another mechanism rather than the standard browser scroll position, you can write a small adapter so the library knows how to read your scroll state. Positioning can also be handled via CSS transforms rather than standard top and left values, which is necessary for smooth scrolling on older iOS devices. The library exposes a straightforward configuration object covering scroll direction, offset defaults, whether to hide off-screen parallax elements, and how elements are shown or hidden. The README is direct about the project's status: no new features are planned, and anyone who wants it maintained should apply to become a contributor.