Different layers move at different speeds — creating an illusion of depth. Scroll the demo to see three layers separate.
Parallax creates an illusion of depth by making different layers of the page scroll at different speeds. The background moves slowly while the foreground (text, buttons) moves at normal speed. This makes the page feel three-dimensional — like looking through a window where distant objects appear to move slower than close ones.
The simplest version uses CSS background-attachment: fixed on a background image. More advanced parallax uses JavaScript to track how far the user has scrolled and applies a CSS transform: translateY() at a fraction of that scroll distance to each layer. Three layers minimum: far background (moves 20% of scroll speed), mid background (moves 50%), foreground text (moves 100%).
Scroll inside the box below. Sky moves slowest, mountains medium, trees fastest.
Scroll downward and watch the sky lag behind the trees.
Far mountains barely shifted; trees flew past. That's parallax depth.
Build a parallax hero section with 3 scrolling layers. Background layer: a mountain/nature image that moves at 30% of scroll speed (translateY by 0.3 * scrollY). Middle layer: floating abstract blob shapes that move at 60% speed. Foreground layer: hero headline and CTA that scroll normally at 100%. Use JavaScript IntersectionObserver or requestAnimationFrame to update transforms on scroll. The depth illusion should be clearly visible when scrolling through the section.