What is parallax scrolling?
Look out of a train window and the fence rushes past while the hills barely move. That difference in speed, parallax, is how the eye reads distance, and animators have borrowed it for nearly a century, from Disney's multiplane camera to the layered backgrounds of side-scrolling video games. On the web it means splitting a page into layers that scroll at different rates: a background image that drifts slowly, text that moves at normal speed, an object in front that slides past faster.
It became a craze in web design in the early 2010s, when long single-page sites told stories as you scrolled through them, and it has never quite left. Today it is usually subtler: a hero image that lags a little behind the headline, a product that floats over its background, a section that reveals itself with a hint of depth.
Why it matters
Why parallax scrolling matters
Used with restraint, parallax gives a flat page a sense of space and pace. It can slow a reader down at the moment that matters, make a product feel physical, or turn a long scroll into something closer to a sequence in a film. Used carelessly, it does the opposite. Motion that moves against the reader's scroll can make people physically unwell, especially those with vestibular disorders. Heavy scripts that recalculate positions on every frame make pages stutter on phones. And text that moves while you try to read it is simply harder to read. The same effect can be the most memorable moment on a page or the reason people leave it.
In practice
How parallax scrolling works in practice
- 01
The cheapest version is pure CSS: a background fixed in place, or layers given different depths with 3D transforms, so the browser handles the movement itself. Newer CSS scroll-driven animations tie an element's movement to the scroll position directly, without JavaScript. When more control is needed, a light script updates transforms in step with the scroll, touching only properties the browser can animate cheaply and never the layout.
- 02
We treat parallax as seasoning. It goes on one or two moments on a page rather than every section, and the page is designed to read perfectly without it. Every effect respects the reduced motion setting, so visitors who have asked their device for less movement get a still page. Then it is tested on a mid-range phone, where most parallax effects either get switched off or reveal their cost.
Watch out
What people get wrong about parallax scrolling
Using it on everything. A page where every section slides, floats and drifts is tiring and slow, and the effect stops meaning anything. Second, hiding content inside the effect, so headlines and buttons only appear at a certain scroll position and search engines, screen readers and impatient visitors never see them. Third, assuming it impresses. Visitors rarely notice parallax that works; they always notice parallax that stutters. And using it as a substitute for content: depth and motion cannot make a thin story interesting, only make it take longer to scroll past.
