// how it works
Every layer scrolls at its own speed.
The scene you just scrolled through is five transparent images stacked on top of each other, and a CSS gradient for the sky. As the page moves, each layer is nudged back down by a different fraction of the scroll distance — the far ridge barely moves, the treeline in front moves at full speed. Your brain reads the speed difference as depth.
No plugin. No video. No library. About 20 lines of JavaScript.
01near treeline (front)100%
02treeline76%
03mid treeline54%
04far treeline34%
05far ridge (back)12%
—sky (CSS gradient)0%
Scroll back up and watch the tree tips slide across the ridgeline behind them — that slide is the whole trick.
← back to capabilities