给网页请一位动画导演AOS 滚动动画库完整指南【免费下载链接】aosAnimate on scroll library项目地址: https://gitcode.com/gh_mirrors/ao/aos滚动页面时元素次第亮起是 AOSAnimate 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 relstylesheet hrefhttps://unpkg.com/aosnext/dist/aos.css / !-- 2. 在 /body 前引入脚本并初始化 -- script srchttps://unpkg.com/aosnext/dist/aos.js/script script AOS.init(); // 默认参数即可工作 /script方式二npm 安装适合模块化工程npm install aosnext --save # 或者 yarn add aosnextimport AOS from aos; import aos/dist/aos.css; // 样式别忘了引 AOS.init();小提示用打包器时确保配好样式 loader如果你用的是 Parcel则开箱即用什么都不用配。三步让第一个元素开口说话装好之后让元素动起来只需要三个动作引入文件、加属性、初始化。其中唯一需要你创作的就是往元素上写一个属性div classintro>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-aoswiggle] { opacity: 0; transform: rotate(-4deg) scale(0.9); transition: transform 0.6s ease, opacity 0.6s ease; } [data-aoswiggle].aos-animate { opacity: 1; transform: rotate(0deg) scale(1); } /* 小屏只淡入、不旋转兼顾观感 */ media (max-width: 767px) { [data-aoswiggle] { transform: none; } }然后在 HTML 里写data-aoswiggle就能用。顺带一提动画与缓动的全集分别定义在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-idcard就能收到aos:in:card、aos:out:card两个专属事件。另外通过 AJAX 动态插入的内容不必担心——AOS 内置的 MutationObserver见src/js/libs/observer.js会自动发现新元素并刷新在手动大改 DOM 的场景下也可以主动调用AOS.refreshHard()重建元素列表。避坑清单4 个高频问题及修复1. 元素一开始就在视口里却死活不动。因为它已经越过了入场点动画在初始化那一刻就错过了。给元素加data-aos-offset0强制触发或把全局anchorPlacement改成center-center这类更宽松的取值。2. duration 想设 4000ms 却没反应。内置的时长与延迟取值范围是 50–3000ms、步长 50ms——这是为了不让生成的 CSS 膨胀而做的取舍。想要更长自己补一条规则即可body[data-aos-duration4000] [data-aos], [data-aos][data-aos][data-aos-duration4000] { transition-duration: 4000ms; }3. 动画被吃掉元素直接出现。多半是别处样式覆盖了opacity或transform检查一下全局样式表也可能是初始化太早把AOS.init()放到 DOM 就绪后再执行或改用startEvent: load。4. 旧浏览器里 AJAX 内容不生效。这类环境不支持 MutationObserverAOS 会主动降级并提示此时需要手动调用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-aosfade-up感受滚动带来的变化玩出心得了欢迎回仓库提 issue或把作品分享给更多人。觉得有用就收藏转发让更多页面动起来。【免费下载链接】aosAnimate on scroll library项目地址: https://gitcode.com/gh_mirrors/ao/aos创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 给网页请一位“动画导演“：AOS 滚动动画库完整指南
给网页请一位动画导演AOS 滚动动画库完整指南【免费下载链接】aosAnimate on scroll library项目地址: https://gitcode.com/gh_mirrors/ao/aos滚动页面时元素次第亮起是 AOSAnimate 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 relstylesheet hrefhttps://unpkg.com/aosnext/dist/aos.css / !-- 2. 在 /body 前引入脚本并初始化 -- script srchttps://unpkg.com/aosnext/dist/aos.js/script script AOS.init(); // 默认参数即可工作 /script方式二npm 安装适合模块化工程npm install aosnext --save # 或者 yarn add aosnextimport AOS from aos; import aos/dist/aos.css; // 样式别忘了引 AOS.init();小提示用打包器时确保配好样式 loader如果你用的是 Parcel则开箱即用什么都不用配。三步让第一个元素开口说话装好之后让元素动起来只需要三个动作引入文件、加属性、初始化。其中唯一需要你创作的就是往元素上写一个属性div classintro>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-aoswiggle] { opacity: 0; transform: rotate(-4deg) scale(0.9); transition: transform 0.6s ease, opacity 0.6s ease; } [data-aoswiggle].aos-animate { opacity: 1; transform: rotate(0deg) scale(1); } /* 小屏只淡入、不旋转兼顾观感 */ media (max-width: 767px) { [data-aoswiggle] { transform: none; } }然后在 HTML 里写data-aoswiggle就能用。顺带一提动画与缓动的全集分别定义在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-idcard就能收到aos:in:card、aos:out:card两个专属事件。另外通过 AJAX 动态插入的内容不必担心——AOS 内置的 MutationObserver见src/js/libs/observer.js会自动发现新元素并刷新在手动大改 DOM 的场景下也可以主动调用AOS.refreshHard()重建元素列表。避坑清单4 个高频问题及修复1. 元素一开始就在视口里却死活不动。因为它已经越过了入场点动画在初始化那一刻就错过了。给元素加data-aos-offset0强制触发或把全局anchorPlacement改成center-center这类更宽松的取值。2. duration 想设 4000ms 却没反应。内置的时长与延迟取值范围是 50–3000ms、步长 50ms——这是为了不让生成的 CSS 膨胀而做的取舍。想要更长自己补一条规则即可body[data-aos-duration4000] [data-aos], [data-aos][data-aos][data-aos-duration4000] { transition-duration: 4000ms; }3. 动画被吃掉元素直接出现。多半是别处样式覆盖了opacity或transform检查一下全局样式表也可能是初始化太早把AOS.init()放到 DOM 就绪后再执行或改用startEvent: load。4. 旧浏览器里 AJAX 内容不生效。这类环境不支持 MutationObserverAOS 会主动降级并提示此时需要手动调用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-aosfade-up感受滚动带来的变化玩出心得了欢迎回仓库提 issue或把作品分享给更多人。觉得有用就收藏转发让更多页面动起来。【免费下载链接】aosAnimate on scroll library项目地址: https://gitcode.com/gh_mirrors/ao/aos创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考