Skip to content

Parallax

Parallax is a web design effect in which layers of a page move at different speeds as the user scrolls, creating a sense of depth

What it means, how it is used and where it comes up, with its related concepts.

What it is and how it works

The name comes from the optical phenomenon whereby nearby objects appear to move faster than distant ones. On the web it is usually applied to backgrounds, illustrations or images that move more slowly than the content, and it appears in visual storytelling, product showcases and campaign pages.

Used sparingly, it can reinforce hierarchy and the rhythm of a narrative. Overused, it hinders reading, hurts performance on mobile devices and can cause dizziness for people with vestibular disorders. It is therefore advisable to respect the operating system’s reduced-motion setting (prefers-reduced-motion) and to check that the content still makes sense without the effect.

Also known as

Parallax scrolling, Parallax effect

Related concepts

Parallax: what it is and how it works · Zorraquino