参考protohomes.com实现网页向下滚动触发动画的方法咨询

所有滚动触发的动画核心逻辑本质上就两层：判定元素和视口的位置关系、在对应时机触发CSS/JS动画，具体拆分下来是这么做的：

1. 单次触发的入场动画（最常用的淡入、上移、缩放这类效果） #

• 前期准备：给所有需要做入场动画的元素加统一标记类，比如.scroll-anim，提前写好初始状态CSS：比如要做淡入上移，就设opacity: 0; transform: translateY(40px);，同时给元素加transition属性，定义好过渡时长、缓动曲线，比如transition: all 0.6s cubic-bezier(0.2, 0, 0.2, 1);。
• 位置监听：优先用原生IntersectionObserver实现，性能比手动监听scroll事件算位置高很多，不会阻塞主线程。初始化 observer 的时候配置两个核心参数：threshold设为0.15_{0.2（元素露出视口15%}20%的时候触发），rootMargin可以按需微调触发时机，比如想让元素提前一点播动画就设为'0px 0px -100px 0px'。
• 触发逻辑：当元素进入监听阈值范围时，给元素加激活类比如.is-active，把CSS属性改到动画终点状态：opacity: 1; transform: translateY(0);，浏览器会自动跑过渡效果。动画触发后直接调用unobserve取消对这个元素的监听，减少不必要的性能消耗。

别上来就引大体积的第三方动画库，这部分逻辑自己写也就30行不到，比引库灵活，还能避免多余的代码体积。

2. 跟滚动进度绑定的联动动画（比如滚动时元素跟随位移、变形、逐帧变化的效果） #

这类效果不是进视口播一次就完，需要跟着滚动位置实时变，实现逻辑和入场动画不一样：

• 提前缓存所有需要绑定联动动画的区块、元素的位置和尺寸信息，不要在滚动回调里反复查询DOM，会严重卡顿。
• 滚动事件必须套requestAnimationFrame做节流，保证回调执行频率和浏览器刷新率对齐，不会掉帧。
• 每次滚动时计算当前区块的滚动进度：先拿到当前区块的顶部距离文档顶部的偏移量、区块自身高度，结合当前页面滚动高度，算出一个0~1之间的进度值：0代表区块刚要进入视口，1代表区块完全离开视口。记得做边界兜底，进度值小于0就归0，大于1就归1，避免iOS橡皮筋滚动之类的场景下动画跳变。
• 把进度值映射到你要修改的CSS属性上：比如要做淡入就把opacity设为进度值，要做位移就拿进度值乘偏移量传给translateY，要做缩放、旋转、甚至遮罩变化都可以用这个值算。所有动画属性只用transform和opacity，这两个属性走GPU合成层，不会触发重排重绘，流畅度最高。

3. 性能优化注意点 #

• 给做动画的元素加will-change: transform, opacity，提前告知浏览器该元素会有动画变化，预分配渲染资源，不要给所有元素乱加这个属性，只给实际做动画的元素加就行，不然反而会浪费内存。
• 不要用top/left/margin这类会触发重排的属性做动画，低端设备上会明显掉帧。
• 移动端不要绑定mousewheel这类鼠标专属事件，直接监听原生scroll事件就行，兼容触摸滚动场景。

内容的提问来源于stack exchange，提问作者Mariusz