Parallax Scroll
A scroll effect where background and foreground layers move at different speeds, creating an illusion of depth.
Parallax exploits the fact that distant objects appear to move slower than near objects. On the web, it's implemented by translating background layers at a fraction of the scroll speed (or foreground layers at a multiple), giving the illusion of 3D depth.
Used sparingly it adds richness; overused it causes motion sickness and slow scrolling. Modern best practice: subtle parallax on hero imagery only, always with `prefers-reduced-motion` respected.
- Hero sections with photographic backdrops
- Editorial features with cinematic ambitions
- Long pages where users want to scroll fast
- Mobile by default — battery and performance hit
- +Always wrap parallax in @media (prefers-reduced-motion: no-preference)
- +Keep parallax speed delta below 0.5
- −Don't parallax body text or interactive elements
People also ask
What is parallax scrolling?
An effect where background and foreground layers move at different speeds during scroll, creating an illusion of depth on a flat surface.
Is parallax still considered modern?
Used heavily, no — the early-2010s full-page parallax sites are dated. Used subtly (5–15% offset on a hero image), it remains a modern depth cue.
Does parallax hurt accessibility?
It can. Always respect prefers-reduced-motion and disable parallax for users who request reduced motion — vestibular sensitivity is real.
How do I implement parallax performantly?
Use CSS transform: translate3d() driven by scroll, or the modern scroll-driven animations API. Avoid background-attachment: fixed — it kills mobile performance.