Parallax Scrolling
Background and foreground layers move at different speeds while you scroll, creating an illusion of depth — like looking out a car window.
Also called: parallax depth, multi-layer scroll
DEPTH
Parallax in action
Scroll to see layers move at different rates
↓ Keep scrolling ↓
How it works
Each layer has a data-speed value. On scroll, JavaScript translates layers by scrollY × speed. Slower layers feel farther away.
- Background (0.3×) moves slowest — feels distant
- Middle (0.6×) moves at medium speed
- Foreground (1×) moves with the page
Modern alternative: CSS animation-timeline: scroll() — no JavaScript needed.