AOS 是一个用于添加滚动动画效果的 JavaScript 库，全称为 "Animate On Scroll"。该库使得在用户滚动页面时能够触发元素的动画效果，从而增强网页的交互性和视觉吸引力。官方文档GitHub：
https://github.com/michalsnik/aos?tab=readme-ov-filecodepen案例演示：
https://codepen.io/michalsnik/pen/WxNdvq官网：
https://michalsnik.github.io/aos/AOS特点
轻量级：AOS 是一个轻量级的库，易于集成到各种项目中，而不会增加太多页面负担；简单易用： 使用 AOS 非常简单，只需引入库并初始化，然后通过在 HTML 元素中添加 data-aos 属性定义动画效果即可；丰富的动画效果： AOS 提供了多种动画效果，包括淡入（fade-in）、淡出（fade-out）、从上方淡入（fade-up）、从下方淡入（fade-down）、从左侧淡入（fade-left）、从右侧淡入（fade-right）等，使得用户能够根据需求选择合适的效果；灵活的配置选项： AOS 允许用户通过配置选项自定义动画的偏移、持续时间、缓动效果等，以满足不同项目的需求；响应式设计： AOS 支持响应式设计，可以根据设备的不同自动调整动画效果，提供更好的用户体验；触发一次或多次： 您可以选择让动画只触发一次，也可以设置为每次用户滚动到元素时都触发一次，以及其他更多的触发选项；事件支持： AOS 提供了一些事件，例如动画开始、动画结束等，可以通过这些事件来执行自定义的 JavaScript 代码；兼容性：AOS 兼容主流的现代浏览器，并提供了对 IE 10+ 的支持。安装配置 在 HTML 文件中引入 AOS 库的链接，可以通过 CDN 或下载本地文件来实现。<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <script src="https://unpkg.com/aos@next/dist/aos.js">npm安装方式。
import AOS from 'aos';import 'aos/dist/aos.css'; // You can also use for styles// ..AOS.init();使用配置（以HTML为例）参考官方配置模板。
效果图。
AOS自定义配置AOS官方GitHub有自定义配置文档参考案例，包括动画偏移量，动画时间，动画函数等等，同时AOS 提供了多种动画效果，比如 fade, fade-up, fade-down, fade-left, fade-right 等，地址如下。https://github.com/michalsnik/aos?tab=readme-ov-file