Scroll · Background· 16 sites
Reference: CSS transforms, MDN contributors
How it works
Three flat layers travel by different amounts to suggest depth without WebGL.In 5 steps.
Depth is a difference in speed, not a blur filter. Keep the reading layer stable and move only decorative planes. A shallow range is enough to separate the planes without making a phone feel like a camera ride.
The controls below are authored demonstration values, not measurements of the linked sites. The stored fits currently describe scroll smoothing and intro curves, not this effect's geometry; see each site's spec sheet for those separately measured values and fit errors.
- 01
Separate the planes
Place decorative shapes in independent absolute layers; keep semantic text in normal reading order.
- 02
Read native progress
Use the section scroll range as the input. No wheel interception or eased touch position.
- 03
Write independent transforms
Multiply the centered progress by the depth range and each layer coefficient. Overscan the artwork so edges cannot appear.
- 04
Flatten the still
Reduced motion centers every layer and removes the extra scroll runway.
- 05
Dispose cleanly
Call destroy() when the view unmounts to disconnect resize and preference observers, remove scroll listeners and cancel pending frames.