- 落地页、产品介绍：每块第一次出现时轻轻淡入，提示“下面还有内容”。
- 阅读进度条、目录高亮：跟着滚动位置走，帮人定位。
- 背景装饰的小幅视差：不影响文字、关掉也不丢信息。
动效 · 页面与滚动
滚动动效Scroll Animation
滚动动效要跟随用户、内容默认可读、只播一次；延迟出现、每块都飞入、劫持滚动都是滥用，减少动效时直接显示。
先在落地页里滚一滚、快速滑到底
同一张落地页，换四种滚动动效。先在框里滚，再按「快速滑到底」数空白，最后勾「模拟脚本加载失败」看内容还在不在。
迷你落地页 · 快速滑到底会不会留空白
这是一个番茄钟 App 的落地页，框里可以滚动。换四种滚动动效，在框里滚、按「快速滑到底」、再试试「模拟脚本加载失败」，看板块本身发生了什么。
番茄专注25 分钟，只做一件事
点一下开始，手机自动免打扰。
功能 1一键开始
不用设置，打开就能专注。
功能 2每周专注报告
看见时间花在了哪里。
用户评价“终于能把论文写完了”
—— 研二学生 · 已专注 312 小时
价格免费 / 进阶版 ¥12 每月
免费版不限次数。
下载现在开始第一个番茄
iOS · Android · 桌面端
- 快速滑到底时，还没显示的板块
- 点「快速滑到底」测一次
- 脚本加载失败时，可读板块
- 勾「模拟脚本加载失败」查看
- 往回滚时重播
- 0 次（看过就不再播）
- 滚轮被接管
- 没有，滚动归用户
在框里往下滚，每块进入视口时只轻轻上移 16px 淡入一次；往回滚不重播。下一步：点「快速滑到底」，数一数有没有空白。
从刚才的操作里提炼
落地页上看到的五个现象，对应验收滚动动效的五条线。
- 内容默认可读，动画只是增强：勾上「模拟脚本加载失败」，克制写法 6/6 可读，滥用写法 0/6——因为后者把内容默认藏起来，全靠脚本放出来。
- 只播一次、不重播：「进场淡入一次」看过就不再动；「每块都飞入」往回滚又飞一遍，读者每次回看都要等。
- 快速滑动不能留空白：600ms 延迟让快速滑到底时视口里只剩虚线框；没有延迟的 200ms 淡入则是 0 个空白。
- 不劫持滚动，视差只做装饰：滥用模式下一次滚轮只能跳一整块、连滚被吞；视差模式只让背后的装饰圆慢一点，文字本身不动。
- 减少动效就直接显示：勾上后所有板块立即出现、视差关闭，信息完整。
什么时候用、什么时候别用
先问：这段动效是在帮人读，还是在拦着人读？
- 后台、表格、文档等要反复查找的页面：滚动动效只会拖慢扫读。
- 价格、按钮、表单等关键内容不要等动画才出现。
- 不要一次滚轮跳一屏、不要锁住滚动讲故事——除非用户明确选择了这种体验。
怎么跟 AI 说、怎么验收
你不用写 IntersectionObserver，但要把“默认可读、只播一次、不劫持、可减弱”写进需求，再亲手滚一遍。
“落地页板块滚动到视口时淡入上移一次（200ms，位移不超过 16px），之后不再重播；内容默认可读，脚本失败也能看到；不劫持滚轮和触摸滚动；视差只用于背景装饰、幅度小；减少动效时全部直接显示、视差关闭；手机上快速滑动不出现空白区块。”
- 快速滑：在手机上从顶部一口气甩到底，落地时看到的板块必须已经有内容。
- 往回滚：已经出现过的板块不应该再飞一遍。
- 关掉脚本：在开发者工具里禁用 JavaScript 刷新页面，文字和按钮都还在。
- 滚轮手感：滚一下就走一点，不会被“吸”到下一屏，也不会滚不动。
- 减少动效：系统打开“减少动态效果”后再看，所有内容直接出现、视差停止。
正反例：同一张落地页，只差一句需求
目标都是“滚动时有点生气”，差别在你有没有把边界说出来。
“板块滚到视口时淡入上移一次（200ms，位移 ≤16px），之后不重播；内容默认可见，脚本失败也能读；不接管滚轮；减少动效时直接显示。”
手快滑到底也没有空白；网络差、脚本挂了，用户照样读完价格和下载按钮。
“滚动的时候加点视差和飞入效果。”
AI 常写成默认 opacity:0、每块延迟飞入、进出都重播，再顺手接管滚轮：快速滑动满屏空白，脚本一挂整页消失。
快速自测
AI 交付的官网：用户反馈“手机上往下一甩，经常看到一大片空白，过一会儿才冒出来”。你最该让 AI 改哪一点？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。