Parallax Layers

ScrollVanilla JS · zero dependenciesOne transform per layer

scroll inside ↓

-- fps

prefers-reduced-motion detected — layers scroll together, no parallax

X-ray · layers

Depth speedfar layers move slower

Fogdistance dims and washes out

Driftfar layers also slide sideways

Parameters

Depth spread0.70

Fog amount0.55

Side drift40 px

Travel260 px

your version · updates as you tinker

How this effect works

Depth on a flat screen is a speed trick your eyes already know from train windows: near things rush, far things crawl. Each layer here gets a depth number from 0 (horizon) to 1 (foreground), and its vertical offset is simply progress × TRAVEL × depth × spread. Four multiplied numbers per layer, one transform each — that's the whole engine.

The fog layer sells the distance the other half of the way: far layers get lower opacity and a cooler, washed-out tint, exactly like real atmosphere between you and a mountain. And drift moves the far layers slightly sideways as you scroll, which breaks the "everything on rails" feeling — the scene starts to feel like a camera move rather than a scrollbar. Turn depth-speed off and watch the scene flatten into a poster instantly.

Production notes: prefers-reduced-motion: layers move together (no differential motion) · transforms only, no repaints · keep it to 3-5 layers; parallax on twenty things reads as soup · the copied snippet is self-contained with its own demo scroll box.