Parallax is one of those techniques that feels like magic but runs on one line of math: translateY(-(scrollY × depth)). That's it.
The trick exploits how your brain perceives depth in the real world — distant objects appear to move slower than nearby ones as you move through space. A mountain range on the horizon barely shifts while a fence post in the foreground flies past.
CSS parallax fakes this by assigning each layer a depth multiplier between 0 and 1. Stars get 0.02 — they barely move. The ground gets 0.60 — it rushes past. Your brain fills in the rest and reads it as a 3D scene.
The implementation is surprisingly lean. Five position: fixed layers, each translated upward by a different fraction of scrollY on every scroll event. The key engineering detail: each layer needs to be tall enough that its bottom edge never enters the viewport, no matter how far the user scrolls — otherwise you get gaps. The height formula is 100vh + (maxScroll × speed) + buffer.
No libraries. No canvas. Just scroll position and arithmetic.
