Demo 05
Depth, without WebGL
Scroll down. The mountain backdrop slides slower than the page, so the text feels like it floats above the scene.
Scroll down. The mountain backdrop slides slower than the page, so the text feels like it floats above the scene.
Each scene measures its position in the viewport on every scroll frame, then translates its image layer by a fraction of the scroll distance. The fraction — the layer's depth — decides how fast it drifts. Small values feel distant; larger ones feel close.
Scenes can stack any number of layers. Two or three is usually enough — depth reads best when it is subtle.
Transforms run on the compositor, updates are batched with requestAnimationFrame, and everything switches off for visitors who prefer reduced motion. No libraries, no scroll hijacking — just arithmetic. Try pulling this off in Webflow.