The background drifts upward as you scroll, creating a depth effect between the hero area and the content below.
animation-timeline: scroll().
Your browser does not support it yet. Try Chrome 115+, Firefox 126+ (with flag), or Safari 18.2+.
Parallax scrolling creates a sense of depth by moving background layers at a different speed than foreground content. The effect mimics how distant objects appear to move slower than close ones when you are in motion — a phenomenon called motion parallax that the human visual system uses for depth perception.
In web design, parallax is purely decorative. It adds visual interest to long-scrolling pages, hero sections, and storytelling layouts. Because it is decorative, it is the safest use case for scroll-driven animations: if the browser does not support it, the user sees a static background with no loss of functionality or content.
JavaScript parallax implementations attach a scroll event listener, read scrollY, calculate an offset, and apply a transform. On every scroll frame. This pattern has been the cause of scroll jank since the early 2010s.
The CSS version declares the animation in a stylesheet. The compositor thread handles the transform directly. There is no main-thread work, no layout recalculation, and no event listener overhead. The background drifts at the compositor's refresh rate regardless of what JavaScript is doing on the page.
The parallax intensity is controlled by the keyframe endpoint. A translateY(10vh) endpoint produces a subtle drift. A translateY(30vh) endpoint creates a dramatic speed difference. The right value depends on the hero section height and the content layout below it.
The background element uses inset: -10vh -10vw to extend beyond the viewport bounds. This prevents edge gaps from appearing as the background shifts. Without this negative inset, the parallax motion would reveal the container's background color at the edges.
Parallax can trigger vestibular discomfort in some users. The prefers-reduced-motion: reduce media query disables the effect entirely. Users who prefer reduced motion see the hero section as a static layout with no background movement.
Because the parallax background is decorative and contains no text or interactive elements, it does not need ARIA attributes or alternative text.