Parallax Scrolling
A scroll effect where background layers move more slowly than foreground content, creating an illusion of depth.
Plain English
Parallax borrows from how we experience the real world — when you drive past trees, the nearby ones blur past while mountains on the horizon barely move. In UI, this translates to a background image or gradient that scrolls at 30–50% the speed of the page content, giving the impression of depth. It works best as a single, subtle effect on a hero section. Heavy multi-layer parallax causes scroll jank, is often disabled on mobile, and triggers motion sickness in users who are sensitive. Always check prefers-reduced-motion and disable all parallax effects when it is set.
Technical
CSS approach: background-attachment: fixed on an element with background-size: cover. Simple but limited — does not work in iOS Safari. JS approach: listen to window.scroll, apply transform: translateY(scrollY * 0.4) to the background layer. Performance: use transform (not top/bottom) and add will-change: transform to stay on the GPU compositor. For scroll listeners, use requestAnimationFrame to throttle.
Live Demo
Parallax scrolling
Scroll inside ↓Section 1: Typography
The background moves at 0.35× speed while this content scrolls normally — creating depth.
Section 2: Color Theory
The background moves at 0.35× speed while this content scrolls normally — creating depth.
Section 3: Spacing Scale
The background moves at 0.35× speed while this content scrolls normally — creating depth.
Background: 0.35× speed · Content: 1× speed
Background at 0.35× scroll speed creates depth — always disable for prefers-reduced-motion.
Usage
✓ Good usage
A hero section where a subtle background gradient moves at 40% scroll speed as the headline text scrolls away — a barely-noticeable depth effect that feels premium.
✗ Bad usage
A five-layer parallax landing page with floating shapes, clouds, and characters all moving at different speeds — distracting, slow, and inaccessible to users with motion sensitivity.
Recommended values
- Background speed: 0.3–0.5× scroll speed
- Use transform: translateY — never top/bottom
- Add will-change: transform on the parallax layer
- Disable entirely when prefers-reduced-motion: reduce
- Limit to 1–2 layers — more causes jank
- Mobile: disable or use a static image fallback
Common mistakes
- Using top/bottom instead of transform — layout-triggering properties cause forced reflows and janky scroll.
- Not disabling for prefers-reduced-motion — users with vestibular disorders can experience nausea.
- Enabling on mobile — parallax on mobile often causes jank, battery drain, and iOS Safari rendering bugs.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add a subtle parallax effect to the hero section background. The background image should move at 40% of the page scroll speed using transform: translateY. Add will-change: transform. Check prefers-reduced-motion and disable the effect if reduced motion is preferred. Do not apply parallax on mobile viewports.