Parallax
视差滚动
Aliases:视差滚动背景慢速滚动分层滚动视差效果
What is it
On scroll, layers move at different speeds — background slower, foreground faster — and the velocity gap reads as depth. The cheapest way to fake 3D in 2D; a staple of hero sections and scrollytelling.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Hero imagery that needs depth and a cinematic feel
- Scrollytelling where layers stage the story
- Decorative background textures drifting slowly
✕ When not to use
- Long-form reading — offset motion causes nausea
- Heavy parallax on mobile — jank and motion sickness
- When it harms legibility or blocks targets
Variants
Slow background
背景减速
Background scrolls at 0.3–0.5x — the default
Multi-layer
多层深度
Three-plus layers at different rates — deeper feel
Scroll-driven
滚动驱动动画
animation-timeline scroll() binds to scroll progress
Implementation
transform: translateY(scrollY * factor)rAF throttleanimation-timeline: scroll()will-change: transformThe classic way — listen to scroll and, inside rAF, apply translateY(scrollTop * factor) per layer, factor < 1 for slow layers (background 0.3, foreground 1.2); the modern way is CSS scroll-driven animations (animation-timeline: scroll()). Transform-only changes stay on the compositor; default off on mobile and under prefers-reduced-motion.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add parallax scrolling to the project's hero section. Inspect the hero structure and scroll container first; confirm the performance budget. Requirements: - Layered speeds, transform-only (compositor) - rAF throttling or CSS scroll-timeline - No readability or scroll-performance regressions (no layout thrash) - Off by default on mobile and under reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
Elements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionSimilarA marketing page organized vertically around one conversion goal: nav and hero explain "what is this and why it's good", mid-sections use features and social proof (logos, testimonials, numbers) to dissolve objections, and a strong call-to-action closes. Sections follow the persuasion order — each screen answers the visitor's next question.
PagesUsed withA visual language that lays out the page like a magazine spread: serif display headings, drop caps, hairline column rules, issue numbering and generous margins, with imagery woven into a page-turning rhythm. Black, white and grey grounds, serif-and-sans pairing — the layout tells the story, not ornament.
StylesUsed withAn atmosphere built from large flowing gradient blooms: teal, violet and blue blurred blobs drift and merge across the background while the foreground stays minimal. Color is the protagonist — soft, cross-hue, aurora-like transitions that give the interface breath and warmth.
StylesUsed with