Scroll down to see layers move at different speeds, creating a sense of three-dimensional depth.
As you scroll through this section, notice how the background elements drift at a slower pace than the text. This subtle difference in speed creates a layered, three-dimensional feeling without any 3D transforms. The technique works by applying different scroll rates to different layers using JavaScript or CSS background-attachment: fixed.
In real life, nearby objects appear to move faster than distant ones when you shift your perspective. Parallax scrolling mimics this natural phenomenon. Background elements scroll at 30-50% of the foreground speed, midground at 60-80%, and foreground at 100%. The greater the speed difference, the more pronounced the depth effect.
Parallax effects should use transform: translate3d() instead of changing top/left properties. This allows the browser to use the GPU for compositing, keeping animations smooth at 60fps. Always use will-change: transform on parallax layers and throttle scroll event handlers with requestAnimationFrame.
Move your cursor around this area. Elements move in response to mouse position at different speeds, creating depth.
Three distinct depth layers. Scroll to see each move at a different rate.
Moves slowest
Medium speed
Moves fastest