Scroll Reveal
滚动显现
Aliases:滚动显现滚动淡入进入视口动画滑到那里才出现滚动出现scroll into view animation
What is it
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.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Long landing pages revealing sections one by one
- Linear reading — articles, case studies, showcases
- When the eye should be led top-to-bottom
✕ When not to use
- Content users came for — late reveal hurts
- Decision-critical info — forms, pricing
- Revealing everything on the page — waiting fatigue
Variants
Fade up
淡入上浮
opacity 0→1 + translateY(24px→0) — the default
Slide in
侧向滑入
Enter from a side — suits alternating image/text layouts
Scale in
缩放浮现
0.92→1 scale — good for cards and images
Implementation
IntersectionObserveropacitytransform: translateYtransitionObserve targets with IntersectionObserver (threshold 0.15–0.25); on entry add a .revealed class driving `transition: opacity 0→1, translateY(24px)→0` over 600ms ease-out, then unobserve. Scale durations by a speed variable. The hidden initial state breaks no-JS rendering — always ship a fallback; respect prefers-reduced-motion (show immediately).
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 scroll-reveal animations to the landing page's sections. Check for an existing reveal/observer utility first; reuse it. Requirements: - Fade up 24px on viewport entry, 600ms, once only - 80ms stagger for on-screen siblings - No-JS and SSR above-the-fold content never hidden - Respect prefers-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
Defers loading of off-viewport resources: images, list chunks and components are fetched and rendered only when they approach or enter the viewport. The first screen pays only for what is visible, with placeholders preventing layout jumps as content streams in.
PatternsUsed withReplaces pagination with automatic loading: as the user scrolls to the bottom, the next page of content appends seamlessly, bridged by a loading indicator or sentinel element. It solves the broken browsing rhythm of hunting for a "next page" button — attention stays on the feed while long lists arrive in imperceptible chunks.
PatternsUsed withReveals a headline line by line or word by word instead of fading the whole block in. The spoken-rhythm staggering gives copy order and weight — a staple of landing-page hero titles, section intros and scrollytelling, usually triggered once on entering the viewport.
MotionSimilarInstead of appearing at once, a group of items enters one after another at a fixed interval — like roll call. A 40–120ms gap lets a list wake up in order: livelier than a single fade, less impatient than true sequential loading.
MotionSimilar