滚动揭示
Scroll Reveal
内容滚进视口时才淡入上移，没滚到的先藏着。
- 又叫：
- 滚动出现
- 滚动淡入
- 进入视口出现
- 滚动加载动画
- reveal on scroll
- fade in on scroll
- view enter
- 展厅
- 动效与节奏
- 形态
- 自带滚动
- 播放
- 手动触发
- 关键词
- 需要 JS / 浏览器 API / 随滚动变化 / 合成层动画 / 动效较多 / 可以直接用
参数工作台
复制给 AI
随参数实时更新给这些内容块加滚动揭示（reveal on scroll）：用 IntersectionObserver 监听，threshold 0.2，元素露出后播放 opacity 0 → 1、translateY(24px) → 0 的过渡，时长 550ms、cubic-bezier(0.22, 1, 0.36, 1)，相邻块错开 60ms，播完立刻 unobserve。只动 transform 和 opacity。prefers-reduced-motion 下不要观察，内容直接显示。
reveal on scroll, IntersectionObserver with threshold 0.2, add class when isIntersecting, transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1), transform translateY(24px) to 0, stagger 60ms, unobserve after first intersection, opacity + transform only, respect prefers-reduced-motion
https://publieople.github.io/design-museum/entry/scroll-reveal/?stage=light
链接带着你调好的参数
什么时候用
- 长落地页的分段内容，一次进来太多会显得糊成一片
- 图文混排的营销页、案例列表，想让阅读节奏被一段段接上
- 列表首屏之外的项目，滚到了再出现，首屏渲染更轻
适用场景：滚动 / 页面 / 列表
推荐取值
- 位移距离
- 12–32px，再大就像东西从下面掉出来
- 淡入时长
- 400–700ms
- 缓动
- cubic-bezier(0.22, 1, 0.36, 1)
- 触发阈值
- 元素露出 15%–25%
别搞混
和「滚动驱动动画 scroll-driven」的区别
滚动揭示是「进入视口触发一次」——元素自己动，触发后就把自己从观察列表里摘掉；滚动驱动动画是每一帧的进度都绑定滚动位置，往回滚还会倒着播。
和「懒加载 lazy loading」的区别
懒加载省的是网络和图片解码，元素位置早就占好了；滚动揭示动的是 opacity 和 transform，内容本来就在页面里，只是先看不见。
容易踩的坑
- 触发一次之后要 unobserve 或断开观察器，否则来回滚动会反复淡入淡出
- IntersectionObserver 的 threshold 写成 1，短视口里的长元素永远达不到，永远不出现
- 在滚动事件里直接读 scrollTop 会让布局反复重算，用 IntersectionObserver 或 requestAnimationFrame 节流
- 元素先设成 opacity: 0 时确认内容仍在 DOM 里，别让禁用脚本或爬虫拿到一个空页面
无障碍降级
prefers-reduced-motion: reduce 时不要观察也不要位移，内容直接以最终状态渲染（本 demo 走的就是这条路径）。
关键词
- IntersectionObserver
- threshold
- rootMargin
- reveal on scroll
- fade in on scroll
- unobserve
- translateY + opacity