A parallax scrolling website: what the effect adds, what it costs, and lighter options
Parallax moves background layers more slowly than the foreground as you scroll, giving a page a sense of depth. Kept small, on one image, it can add atmosphere. Applied to whole pages it can make people dizzy, slow the page down and push content out of view. Use it sparingly, build it with scroll-driven CSS rather than scroll listeners, and switch it off for anyone who has asked for reduced motion.
Where parallax comes from
Parallax is the way near objects seem to move faster than distant ones when you move: trees beside a train shoot past while hills drift. Animators and game designers used it for decades by sliding background layers at different speeds, and side-scrolling video games made it familiar. On the web it became a trend in the early 2010s, when long single-page sites with layered illustrations and photos sliding at different rates were briefly everywhere. The trend faded, but the technique is still common in heroes and storytelling pages.
What it adds and what it costs
| Adds | Costs |
|---|---|
| A sense of depth in a hero photo or illustration | Motion that can trigger dizziness and nausea in people with vestibular disorders |
| Atmosphere on a story or launch page | Scroll handlers in JavaScript that can make scrolling stutter on slower phones |
| A cue that the page continues | Content that slides out of view or overlaps at some screen sizes |
| A memorable first screen | Larger images, since layers are scaled up to cover their movement |
The accessibility cost is the serious one. WCAG's Animation from Interactions explanation names parallax scrolling directly as a common non-essential animation, and notes that motion triggered by scrolling can cause dizziness, nausea and headaches for people with vestibular disorders. The criterion is at level AAA, but its fix is cheap: let people turn the motion off, and respect the reduce-motion setting in their device.
Is parallax bad for UX?
Not inherently. It becomes a problem when it's doing a job the content should do, such as making a thin page feel substantial, or when it gets in the way of reading. Text that scrolls at a different speed from the page is hard to read. Several layers moving at once are tiring. Movement that keeps going when you stop scrolling, sometimes called scroll smoothing or scroll hijacking, takes control away from the visitor. A small amount of movement on a single background image, with text that scrolls normally, avoids all three.
A parallax effect in CSS
Scroll-driven animations, covered in MDN's CSS scroll-driven animations module, let CSS tie an animation's progress to scrolling, with no JavaScript. A view() timeline runs an animation as an element crosses the screen, so a background can drift a few per cent between entering and leaving:
- Define the movement:
@keyframes drift { from { translate: 0 6%; } to { translate: 0 -6%; } }. - Attach it to the scroll:
animation: drift linear both; animation-timeline: view();. - Wrap both in
@supports (animation-timeline: view()), so browsers without support show a still image. - Wrap that in
@media (prefers-reduced-motion: no-preference), so people who asked for less motion never get it. - Keep the range small. Movement of 5 to 10% of the element's height reads as depth; 50% reads as a gimmick.
- Give the image enough extra size to cover its movement, and crop it with
overflow: clipon the parent.
Because the browser can run this away from the main thread and only moves translate, it avoids the stutter of scroll listeners and doesn't shift the layout. See scroll animations on websites and prefers-reduced-motion.
Lighter alternatives
- A still photo with strong depth in it. A well-composed picture already has foreground and background.
- A one-time entrance, such as the hero image settling from a slight scale as the page loads.
- Sticky sections, where a photo stays put while text scrolls past beside it.
- Overlapping layout, an image crossing into the next section, which suggests layers without moving.
Parallax in Anticode
Design-engine pages have no scripts, so any motion on them is CSS. When a page uses a full-bleed photo hero, the photo drifts slightly as you scroll, using a scroll-driven CSS animation that only runs in browsers that support it. In the layout editor's inspector, an element's motion can be set to none, rise or parallax; parallax moves it a few per cent as it crosses the screen, and it's only applied where the browser supports scroll-driven animation and the visitor hasn't asked for reduced motion.
Every design-engine page also turns all animation off under prefers-reduced-motion: reduce, and since 23 October 2026 the publish gate refuses any page or app that animates without a reduced-motion rule.
Questions people ask
Does parallax cause motion sickness?
It can for people with vestibular disorders, especially when large areas move. Keep it small and switch it off under reduced motion.
Can I make a parallax effect without JavaScript?
Yes. Scroll-driven CSS animations with a view() timeline do it, with a still fallback in browsers that don't support them.
Should parallax be turned off on mobile?
Not by screen size. Turn it off for people who ask for reduced motion, and keep the effect light enough to run smoothly on slower phones.