为什么需要一份“特效清单”
打开一个网站，最先留下印象的往往不是文案，而是动效。淡入、跟随、视差、数字滚动，这些效果大多由 JavaScript 驱动。所谓“js特效大全”，不是把网上代码复制粘贴堆在一起，而是按用途分类，知道什么场景该用什么、什么该放弃。
分类比数量更重要
特效按触发方式分四类：滚动触发、指针交互、状态反馈、数据渲染。分类清楚后，查找和复用成本会明显下降。
滚动类特效
最常见的是元素进入视口时淡入或上移。实现上优先用 IntersectionObserver，比监听 scroll 事件更省性能。视差滚动适合品牌展示页，但移动端容易造成卡顿，建议在窄屏关闭或降低幅度。滚动进度条、吸顶导航也属于这一类，逻辑简单、收益直接。
指针交互类特效
鼠标跟随光斑、卡片 3D 倾斜、磁性按钮都属于指针交互。核心是监听 pointermove 并做位移映射。要点是限制更新频率，用 requestAnimationFrame 合并渲染；倾斜角度控制在 10 度以内，否则容易晕眩。触摸设备没有悬停状态，需要提供点击替代方案。
状态反馈类特效
按钮点击涟漪、表单校验抖动、加载骨架屏，解决的是“用户操作后发生了什么”。这类特效优先级最高，因为它直接影响可用性。抖动幅度不宜过大，持续时间控制在 300 毫秒左右，避免干扰输入。
数据与文字类特效
数字滚动、打字机文字、图表入场动画常用于数据展示页。数字滚动应保证最终值准确，动画只是过程；打字机效果要提供跳过方式，长文本场景不适用。Canvas 粒子背景视觉冲击强，但会持续占用主线程，建议限制粒子数量并在页面隐藏时暂停。
性能与可访问性底线
所有特效都应遵守两条底线：优先使用 transform 和 opacity 触发合成层动画，避免频繁修改布局属性；尊重 prefers-reduced-motion 媒体查询，为对动效敏感的用户关闭非必要动画。
特效的价值在于服务内容，而不是抢走注意力。把清单用对场景，比追求数量更有意义。
