滚动叙事怎样才不油腻
滚动动画最容易从“帮助理解”滑向“展示技巧”，判断标准应该始终是内容是否更容易被读懂。
先用白话理解
这篇内容在讲什么？
这篇内容讲的是：滚动时怎样加动画，既有节奏又不影响阅读。
问题
滚动动画卡顿，还要等动画结束才能阅读，怎样改善？
动画数量太多、位移太大，且没有处理减少动态偏好。
解决方案
- 每段动画只解释一个关系
- 优先使用 transform 和 opacity
- 离屏后停止动画
- 支持减少动态模式
可清理的滚动显现示例代码
const media = window.matchMedia(
'(prefers-reduced-motion: reduce)'
)
const elements = document.querySelectorAll('[data-reveal]')
if (!media.matches) {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return
entry.target.classList.add('is-visible')
observer.unobserve(entry.target)
})
}, { threshold: 0.15 })
elements.forEach((element) => observer.observe(element))
// 页面卸载时执行
onBeforeUnmount(() => observer.disconnect())
}每段动画只承担一个任务
入场负责建立顺序，进度负责表达位置，视差负责区分层级。一个元素同时旋转、缩放、模糊和横移，通常意味着动效缺少明确目的。
触发位置要符合阅读速度
内容进入视口后应尽快可读，不让用户等待动画结束。移动端滚动速度更快，触发距离和位移幅度应该进一步收紧。
- 控件反馈约 150–220ms
- 普通内容入场约 500–800ms
- 避免大段正文逐字出现
静态模式必须完整
减少动态模式、脚本失败或页面打印时，内容仍应保持正确顺序。这也是检验动效是否只是增强层的最好方式。
结语
判断最终要回到真实体验
技术方案没有脱离场景的标准答案。把用户任务、业务边界、开发成本和长期维护放在一起评估，才有可能做出稳定、清晰且经得起变化的页面。
照着做的步骤
- 为每段动画写出目的
- 控制位移和时长
- 在移动端减少动画幅度
- 验证减少动态模式
容易踩的坑
- 动画类型过多
- 反复触发导致内容闪烁
- 页面卸载后动画仍运行
术语不用怕
- 触发点：动画开始的滚动位置
- Scrub：动画进度跟随滚动
- 入场动画：内容首次出现的动画