Parallax

Definition

Parallax is an effect that makes the background and foreground move at different speeds as you scroll, adding a sense of depth to an otherwise flat screen. The principle comes straight from real life. When you look out the window of a moving car, the trees close to the road whip past quickly while the distant mountains drift along slowly. That difference in speed based on distance is exactly what creates the sense of perspective your eyes rely on. The web works the same way: if you make the far background move slower than the scroll and the near foreground move faster, the layers look like they sit at different distances, giving the page a three-dimensional feel.

Why does it matter?

Used well, parallax adds real immersion, especially to the hero section at the top of a page. As the layers shift out of sync while you scroll, the screen feels alive, which keeps people on the page longer and draws them into the story. But this effect is a double-edged sword. Too much movement makes the screen feel busy, and in bad cases it can genuinely trigger dizziness or motion sickness. Scrolling is the basic action people take to read your content, so piling heavy movement on top of it gets in the way of reading. On top of that, some users are physically sensitive to this kind of motion, which is why a restrained sense of comfort over spectacle really matters. Good parallax never announces itself; it just quietly adds depth. So when you decide whether to use it, it helps to ask not how impressive it looks, but whether everyone can view it comfortably.

Common mistakes

• Making the speed difference far too large. When the background and foreground move at drastically different speeds, the result reads as disorientation rather than subtle depth, and people struggle to look at the screen for long.
• Ignoring users who are sensitive to motion. Some people feel dizzy or queasy from this kind of effect, and if there is no way at all to turn it off, those users simply cannot view the page in comfort.
• Layering parallax onto reading areas like body text. When you scroll to read and the background drifts separately from the words, your eyes get unsettled, making it hard to focus on the very content you need to take in.

Practical tips

• Keep the speed difference small. The subtler the gap between background and foreground movement, the more refined it feels; depth still comes across clearly without being dizzying, which is safe in most situations.
• Always respect prefers-reduced-motion, the system setting where users ask for less movement. When it is on, turn parallax off or dial it way down, so sensitive users can view your content in comfort too.
• Parallax is a background device that makes your content shine, not the star of the show. Save it for the one or two places where first impressions matter, like a hero, and cut it boldly from information-dense body sections. If the effect stands out, it is usually already a little too much.

Related concepts