.parallax-N - scroll drift

Elements with .parallax-N drift vertically relative to scroll. N is a speed factor: 1 is static (with the page), <1 trails behind, >1 races ahead - the classic depth illusion.

<div class="parallax-0.6">background layer</div>
<div class="parallax-1.4">foreground layer</div>

Demo - layered depth scene

Three cards stacked like a fanned deck: the back layer crawls (0.4), the middle moves with the page, the front races ahead (1.6). Scroll slowly and watch them slide across each other - that relative motion is the entire effect.

Demo - isolated comparison

The same speeds one per row, so you can check each drift against the page edges without overlap.

Tunables

Implemented as a scrubbed yPercent tween from -(N-1)*25% to +(N-1)*25% across the element's full viewport traversal, so the drift is perfectly symmetric around its resting spot.