Rellax Parallax Layers — Free data-rellax-speed Parallax Hero Snippet

Rellax is a dependency-free parallax library built around one idea: instead of writing scroll-math for every layer by hand, you tag elements with data-rellax-speed and let the library translate them proportionally as the page scrolls. This snippet builds a three-layer hero — a gradient backdrop, a pair of blurred color blobs, and an anchored content layer — where the entire depth effect is expressed through three attribute values.

Speed as depth

Each .rlx-layer carries a data-rellax-speed value: -8 on the back gradient, -4 on the mid blob layer, and 2 on the front content. Rellax interprets negative speeds as moving slower than natural scroll (so the element appears to lag behind and read as farther away) and positive speeds as moving faster than natural scroll (so the element appears to rush ahead and read as closer to the viewer). This mirrors the same depth logic used in Parallax Hero Section, but where that snippet computes per-layer factors from mouse position in hand-written JavaScript, Rellax computes them from scroll position automatically once you call new Rellax(...).

One constructor call, many layers

new Rellax('.rlx-layer', { speed: -2, center: false, round: true }) is the entire JavaScript integration — Rellax queries every matching element, reads its own data-rellax-speed (falling back to the speed option when absent), and attaches a single shared scroll listener that updates all of them together. Adding a fourth layer means adding a new element with its own data-rellax-speed attribute — no changes to the JS at all.

round: true and performance

Rellax uses transform: translate3d under the hood so layer movement is GPU-composited, and the round: true option rounds computed pixel offsets to whole numbers, which avoids sub-pixel blurring on layers with sharp edges or text. Because there's a single scroll listener shared across every tagged element rather than one listener per layer, the library stays cheap even with many layers on a busy page.

Rellax versus a custom parallax script

Compared to hand-rolling parallax with lerp smoothing (as in Parallax Hero Section), Rellax trades fine-grained control (easing curves, mouse-driven input, device tilt) for simplicity — it's scroll-only, attribute-driven, and requires no per-project math. It's the right tool when you want several elements drifting at different rates purely from scroll position and don't need mouse interactivity.

Customizing it

Adjust each layer's data-rellax-speed to taste (Rellax typically expects values roughly between -10 and 10), add more blobs or shapes as additional layers, or call rellax.refresh() after dynamic content changes so offset calculations stay accurate. Pair this hero with Hero Section copy patterns or a Gradient Progress indicator below the fold.