【亲测免费】 AOS 动画滚动库安装与使用教程

2026-01-16 09:18:17作者：郜逊炳

1. 项目目录结构及介绍

AOS（Animate On Scroll）是一个轻量级的JavaScript库，用于在页面滚动时实现动画效果。以下是项目的典型目录结构：

.
├── dist/                # 存放编译后的CSS和JS文件
│   ├── aos.css          # 样式表文件
│   └── aos.js           # JavaScript主文件
├── src/                 # 源代码目录
│   ├── aos.css          # 源码CSS
│   └── aos.js           # 源码JS
└── package.json         # 项目依赖和元数据

dist/ 目录包含了可以直接在项目中使用的编译后的文件，而src/ 存放原始源代码。

2. 项目启动文件介绍

AOS 并没有一个标准的启动文件，因为它不需要服务器环境来运行。它是一个纯前端库，通过在HTML文件中引入aos.js并初始化AOS对象来使用。以下是如何在HTML文件中引入和初始化AOS：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <title>AOS 教程</title>
</head>
<body>
    <!-- 在这里添加你的元素 -->
    <div data-aos="fade-up"></div>

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();  // 初始化AOS
    </script>
</body>
</html>

3. 项目的配置文件介绍

AOS 的配置主要通过调用 AOS.init() 方法时传递的参数来进行。这些参数可以是对象形式，定义了各种设置，例如禁用特定设备上的动画、设置初始化事件等。以下是一些可选的配置选项示例：

AOS.init({
    disable: 'phone',   // 禁用手机设备上的动画
    startEvent: 'DOMContentLoaded', // 初始化的事件，默认是DOM内容加载完成
    initClassName: 'aos-init', // 初始化完成后添加的类名
    animatedClassName: 'aos-animate', // 动画激活时添加的类名
    useClassNames: false, // 是否将"data-aos"属性值作为类名添加到元素上
    disableMutationObserver: false, // 是否关闭自动检测DOM变化的功能
    debounceDelay: 50, // 延迟时间，用于防抖处理，单位是ms
});