What is Parallax scrolling?
Also called: Parallax
The short answer
Parallax scrolling moves background and foreground layers at different speeds as you scroll, creating an illusion of depth.
What people say: “that 3D scrolling effect”, “backgrounds that move slower”.
Parallax scrolling, explained
The effect borrows from old animation cameras: far things move slowly, near things quickly. On the web it is best done with transforms or scroll-driven CSS so it stays smooth.
Used lightly it adds depth; overdone it causes motion sickness, so it should switch off for visitors who prefer reduced motion.
Questions people ask about Parallax scrolling
What is Parallax scrolling?
Parallax scrolling moves background and foreground layers at different speeds as you scroll, creating an illusion of depth.
Is parallax bad for SEO?
No, as long as the content is real HTML text in the page and the effect does not delay loading.
How do you make a parallax website?
Layer elements and move each at a different rate tied to scroll position, ideally with CSS scroll-driven animations or transforms.
Related terms
Scrollytelling is telling a story through scrolling: each scroll step reveals, animates or transforms content, so the page plays like a film the reader controls.
Scroll-driven animationScroll-driven animation ties an animation's progress to scroll position instead of time, so elements animate exactly as far as the reader has scrolled.
Smooth scrollingSmooth scrolling eases the page's movement so scrolling glides rather than jumps, either natively in the browser or with a library that interpolates scroll position.
Reduced motionReduced motion is a device setting people turn on when animation makes them dizzy or distracted; sites should honour it by toning down or removing non-essential motion.
Part of the Web Encyclopedia by Apex Flow Digital. Definitions are general knowledge, kept current, with no invented statistics.