给网页请一位“动画导演“：AOS 滚动动画库完整指南
给网页请一位"动画导演"：AOS 滚动动画库完整指南
【免费下载链接】aosAnimate on scroll library项目地址: https://gitcode.com/gh_mirrors/ao/aos
滚动页面时元素次第亮起，是 AOS（Animate on Scroll）最擅长的戏法：这款零依赖的滚动动画库，一行初始化代码就能让元素随滚动淡入、滑移或缩放，几分钟为静态网页注入专业级动感。
先还原一个真实场景：官网首页做完了，产品图、功能介绍整整齐齐排了一屏，可访客滚过去时毫无波澜——像在翻一份 PDF 说明书。而隔壁用了滚动动画的页面，元素随着滚轮依次浮现，停留时间肉眼可见地变长。区别不在内容，而在"节奏感"。
这篇文章不堆术语，按"先懂原理、再动手、后避坑"的路线，带你半小时把 AOS 用熟，顺带解锁几个能写进简历的技巧。
先拆穿它的"戏法"：AOS 的工作原理就三句话
别看效果花哨，AOS 的内核朴素得很，一共三步：
- 页面就绪时，JS 扫出所有带
data-aos的元素，并计算每个元素相对视口的"入场点"与"退场点"，位置计算集中在src/js/helpers/offsetCalculator.js； - 滚动监听以节流方式运行（默认 99ms 检查一次），当前位置一旦越过入场点，就给元素挂上
aos-animate类，判断逻辑见src/js/helpers/handleScroll.js； - 动画本身不靠 JS 逐帧驱动，而是交给 CSS 过渡——类名一换，
transition自动播放，流畅且省性能。
它和 wow.js 这类老库最大的区别是"双向"：向上滚回去时，元素还能反向退场。这意味着你可以做出"进入时上滑淡入、离开时下滑消失"的完整闭环，这正是mirror选项的由来。
另外它的家底很干净：运行时只有 throttle、debounce 两个小工具函数作伴，核心逻辑集中在src/js/aos.js，压缩后不足 10KB，页面加载几乎无感。
两分钟装好：CDN 与包管理器任选一条路
方式一：CDN 引入，适合纯 HTML 页面或想快速试水的你
<!-- 1. 在 <head> 里引入样式 --> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <!-- 2. 在 </body> 前引入脚本并初始化 --> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); // 默认参数即可工作 </script>方式二：npm 安装，适合模块化工程
npm install aos@next --save # 或者 yarn add aos@nextimport AOS from 'aos'; import 'aos/dist/aos.css'; // 样式别忘了引 AOS.init();小提示：用打包器时确保配好样式 loader；如果你用的是 Parcel，则开箱即用，什么都不用配。
三步让第一个元素"开口说话"
装好之后，让元素动起来只需要三个动作：引入文件、加属性、初始化。其中唯一需要你"创作"的，就是往元素上写一个属性：
<div class="intro"><div >AOS.init({ offset: 120, // 触发点偏移量，默认 120px duration: 600, // 全站默认播放时长 easing: 'ease-out-back', // 全站默认缓动，带一点回弹 once: false, // true 则每个元素只播一次 mirror: false, // true 则滚过时反向退场 anchorPlacement: 'top-bottom', // 元素顶部对齐视口底部时触发 startEvent: 'DOMContentLoaded', // 初始化时机，可换 'load' disable: 'mobile' // 直接关掉手机端的动画 });disable一项值得单独展开：它接受'phone'、'tablet'、'mobile'这类字符串，也接受一个函数。想按屏幕宽度、按机型、甚至按用户的"减弱动态效果"偏好来关闭动画，写个函数返回true即可。
三个进阶技巧，让页面动得有层次
技巧一：写一个自己的动画
内置动画不够用？自定义其实只是"写一段 CSS + 起个名字"的事。比如做一个带轻微旋转的"摇摆入场"：
[data-aos="wiggle"] { opacity: 0; transform: rotate(-4deg) scale(0.9); transition: transform 0.6s ease, opacity 0.6s ease; } [data-aos="wiggle"].aos-animate { opacity: 1; transform: rotate(0deg) scale(1); } /* 小屏只淡入、不旋转，兼顾观感 */ @media (max-width: 767px) { [data-aos="wiggle"] { transform: none; } }然后在 HTML 里写data-aos="wiggle"就能用。顺带一提，动画与缓动的全集分别定义在src/sass/_animations.scss和src/sass/_easing.scss，想照葫芦画瓢就翻这两份文件。
技巧二：接上 Animate.css 等外部动画库
AOS 允许把data-aos的值直接当类名交给外部库处理：
AOS.init({ useClassNames: true, // 把><div>[data-aos] { visibility: hidden; } [data-aos].animated { visibility: visible; }技巧三：监听事件，跟动画"对话"
每个元素入场、退场时，AOS 都会在document上派发事件，适合做埋点或联动其他逻辑：
document.addEventListener('aos:in', ({ detail }) => { console.log('入场：', detail); // detail 是当前元素节点 }); document.addEventListener('aos:out', ({ detail }) => { console.log('退场：', detail); });如果只想监听某一个元素，给它加data-aos-id="card"，就能收到aos:in:card、aos:out:card两个专属事件。
另外，通过 AJAX 动态插入的内容不必担心——AOS 内置的 MutationObserver（见src/js/libs/observer.js）会自动发现新元素并刷新；在手动大改 DOM 的场景下，也可以主动调用AOS.refreshHard()重建元素列表。
避坑清单：4 个高频问题及修复
1. 元素一开始就在视口里，却死活不动。因为它已经越过了入场点，动画在初始化那一刻就"错过"了。给元素加data-aos-offset="0"强制触发，或把全局anchorPlacement改成center-center这类更宽松的取值。
2. duration 想设 4000ms 却没反应。内置的时长与延迟取值范围是 50–3000ms、步长 50ms——这是为了不让生成的 CSS 膨胀而做的取舍。想要更长，自己补一条规则即可：
body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000'] { transition-duration: 4000ms; }3. 动画被"吃掉"，元素直接出现。多半是别处样式覆盖了opacity或transform，检查一下全局样式表；也可能是初始化太早，把AOS.init()放到 DOM 就绪后再执行，或改用startEvent: 'load'。
4. 旧浏览器里 AJAX 内容不生效。这类环境不支持 MutationObserver，AOS 会主动降级并提示，此时需要手动调用AOS.refreshHard()补一次刷新。
性能与移动端：动画不能拖后腿
AOS 默认已内置节流与防抖（滚动 99ms、窗口缩放 50ms），高频操作不会卡顿。在此基础上，再守住三条原则：
- 同一屏内动画元素别贪多，视觉重点控制在几个以内；
- 对复杂元素可加
will-change: transform，让浏览器提前做合成准备； - 低端设备直接关掉动画，用
disable函数按条件判断：
AOS.init({ disable: function () { return window.innerWidth < 600; // 宽度小于 600px 一律不播 } });想深入？源码与测试是最好的老师
文档之外，这个仓库本身就是一本教材：
- 演示页：
demo/目录下有anchor.html（锚点触发）、offset.html（偏移量）、once.html（单次播放）、async.html（异步内容）等多个现成示例，本地打开对照着看，比任何讲解都直观； - 测试即文档：
cypress/integration/里几乎每个配置项都有一个独立测试文件（如settings_duration_spec.js、settings_mirror.js），想确认某个参数的确切行为，看测试用例比翻源码更快； - 源码结构：主逻辑在
src/js/aos.js，样式在src/sass/，设备检测逻辑在src/js/helpers/detector.js，各司其职、边界清晰。
想 clone 到本地慢慢研究：
git clone https://gitcode.com/gh_mirrors/ao/aos写在最后
动画不是炫技，而是引导视线、制造节奏的手段。AOS 的价值在于把这件事的成本压到了极低——一个属性、一行初始化，剩下的交给 CSS。现在就打开你的项目，随便挑一个元素加上data-aos="fade-up"，感受滚动带来的变化；玩出心得了，欢迎回仓库提 issue，或把作品分享给更多人。
觉得有用就收藏转发，让更多页面"动"起来。
【免费下载链接】aosAnimate on scroll library项目地址: https://gitcode.com/gh_mirrors/ao/aos
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考