滚动显现
Scroll Reveal
别名:滚动显现滚动淡入进入视口动画滑到那里才出现滚动出现scroll into view animation
这是什么
元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 长落地页的分区内容逐段呈现
- 文章、案例展示等线性阅读内容
- 需要引导视线自上而下移动
✕ 不适用场景
- 用户要找的东西被藏进动画（迟到即伤害）
- 表单、价格等决策关键信息
- 整页元素全部滚动显现（等待感堆积）
常见形式
淡入上浮
Fade up
opacity 0→1 + translateY(24px→0)，最常用
侧向滑入
Slide in
从左右滑入，适合图文交错布局
缩放浮现
Scale in
从 0.92 放大到 1，卡片与图片适用
实现要点
IntersectionObserveropacitytransform: translateYtransitionIntersectionObserver 观察目标元素，进入视口（threshold 0.15～0.25）时 加 .revealed 类触发 transition：opacity 0→1、translateY(24px)→0， 600ms ease-out，只触发一次后 unobserve。动画时长乘以一个可调速度变量。 初始隐藏状态会导致无 JS 时不显示，务必提供 no-js 回退； 尊重 prefers-reduced-motion（直接显示）。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目落地页的分区内容添加滚动显现动画。 先检查是否已有 reveal/observer 工具，复用而非新写。 要求： - 进入视口淡入上浮 24px，600ms，只播一次 - 同屏元素 80ms 错峰 - 无 JS 或 SSR 首屏内容不被隐藏 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用"推迟加载"的方式处理暂不在视口内的资源：图片、列表分块、组件等在接近或进入可视区域时才真正请求和渲染。 首屏只承担可见部分的开销，配合占位骨架避免突然撑开布局，让长页面既快又稳。
交互模式搭配使用用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互模式搭配使用把标题或段落按行、按词逐个显现，而不是整块淡入。文字"被说出来"的节奏感让信息有先后与分量， 常用于落地页首屏大标题、章节开场与滚动叙事， 通常进入视口时触发一次。
动效相似概念一组元素不一起出现，而是按固定间隔依次淡入或上浮，像点名一样逐个到位。 间隔 40～120ms 即可让列表"有秩序地醒来"， 比整块淡入更有生命感，也比真实逐项加载等待感更低。
动效相似概念