Parallax scroll
An effect where layers on a page move at different speeds during scroll, creating a sense of depth.
Background elements scroll slower than foreground elements, mimicking how distant objects appear to move slower than near ones. Borrowed from classic 2D video game graphics, parallax became popular on marketing pages in the 2010s. Overuse made it a cliché, but used sparingly it still adds dimension. CSS scroll-driven animations now allow native parallax without JS.
Also called
parallax scrollingdepth scroll
When to use
- Marketing pages where depth supports the storytelling
- Long-form articles with visual breaks between sections
- Hero sections where a small parallax adds polish
When not to use
- Performance-sensitive contexts (parallax can cause jank)
- Anywhere reduced-motion preferences should be respected — always provide a still fallback
- Content-heavy pages where motion competes with reading
Related
Source
Animation history (early arcade games like Moon Patrol in 1982 used the technique); on the web, popularized around 2011-2013.