SCROLL EFFECT
滚动入场揭示Scroll Reveal
元素滚动进入视口时才淡入上浮，多个元素之间错开 80-150ms 形成接力感。
效果预览
↑ 元素依次上浮进场（stagger 150ms）
适合用在哪
所有网站的内容区。它是"页面有生命感"的最低成本方案。
容易踩的坑
- 首屏内容也设为 opacity:0 等待 JS，脚本加载慢时首屏一片空白，LCP 变差。
- 每个段落、每张图都加入场动画，用户滚动时满屏在动，阅读节奏被打断。
- 离开视口时不 unobserve 反而重置状态，来回滚动时元素反复闪现。
设计提示词 · Prompt
滚动入场揭示（Scroll Reveal）：用 IntersectionObserver 监听元素进入视口（rootMargin 提前 100px 触发），进入时添加 class 触发动画——初始 opacity:0 + translateY(24-40px)，过渡到归位，时长 600-900ms、缓动 cubic-bezier(.22,1,.36,1)（快出慢停）。同一组元素用 nth-child 或内联 --i 变量做 stagger（每个递延 80-150ms）。每个元素只触发一次（进入后 unobserve），避免来回滚动时反复闪动。全局遵守 prefers-reduced-motion 时直接显示。
Scroll Reveal: use IntersectionObserver to detect elements entering the viewport (rootMargin triggering 100px early); on entry add a class to trigger the animation — initial opacity:0 + translateY(24-40px), transitioning to its resting position, duration 600-900ms, easing cubic-bezier(.22,1,.36,1) (fast out, slow stop). Elements in the same group are staggered with nth-child or an inline --i variable (each delayed by 80-150ms). Each element triggers only once (unobserve after entry) to avoid repeated flashing when scrolling back and forth. Globally respect prefers-reduced-motion by showing elements directly.
常见搭配
同一页面里经常和「滚动入场揭示」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-scrrev"> <div class="d-scrrev__el" style="--i:0"><span class="d-scrrev__ln d-scrrev__ln--a" style="width:52%"></span></div> <div class="d-scrrev__el" style="--i:1"><span class="d-scrrev__ln" style="width:88%"></span></div> <div class="d-scrrev__el" style="--i:2"><span class="d-scrrev__ln" style="width:74%"></span></div> <span class="d-scrrev__tag">↑ 元素依次上浮进场（stagger 150ms）</span> </div>