用HTML、CSS及JS一步步创建网站，AOS 页面滚动动画库的使用

本文链接：https://blog.csdn.net/weixin_45397318/article/details/116539247

本文档详细介绍了如何使用AOS（Animate on Scroll）库创建页面滚动动画，包括安装、初始化、使用data-aos属性设置动画，以及API、JS事件、自定义动画和注意事项等。AOS提供了多种内置动画、easings和锚点位置，适用于网页动态效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AOS 页面滚动动画库的使用

Github 地址：AOS - Animate on scroll library
演示，这个是用了 AOS 滚动动画库的一个网站

 演示网站的源代码地址，注释很详细

1 安装

基本的

在 html 文件的标签中引入 AOS-CSS 文件

< link  rel =“ stylesheet ” href =“ https://unpkg.com/aos@next/dist/aos.css ” />

在关闭标签之前添加脚本，并初始化AOS

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init();
</script>

包管理器

在项目根目录下安装 aos 包

yarn add aos@next
或者 npm install --save aos@next

导入脚本，样式并初始化AOS

import AOS from 'aos';
import 'aos/dist/aos.css'; // 也可以使用 <link> 引入样式
// ..
AOS.init();

为了 AOS 生效，必须确保在编写过程中配置了样式加载器，并正确绑定。

2 页面中怎样使用

2.1 初始化 AOS

AOS.init();

// 可以传一个可选的配置对象
// 下面列出了默认配置
AOS.init({
    // 全局配置:
    disable: false, // 禁用。可取值: 'phone'、'tablet'、'mobile'、布尔值、表达式或函数
    startEvent: 'DOMContentLoaded', // AOS 应初始化在 document 上绑定的事件名
    initClassName: 'aos-init', // 初始化后使用的 class 类
    animatedClassName: 'aos-animate', // 动画 class
    useClassNames: false, // 值为 true，将添加滚动 `data-aos` 内容为 class
    disableMutationObserver: false, // disables automatic mutations' detections (高级)
    debounceDelay: 50, // 调整窗口大小时使用的 (高级)
    throttleDelay: 99, // 滚动页面时使用的延迟 (高级)
  
    // 通过 'data-aos-*' 属性在每个元素上重写配置:
    offset: 120, // 从原始触发点的偏移量 (px)
    delay: 0, // 取值范围 0-3000, 每多 1 加 50ms
    duration: 400, // 取值范围 0-3000, 每多 1 加 50ms
    easing: 'ease', // AOS 动画默认 easing
    once: false, // 向下滑动时，动画只发生一次
    mirror: false, // 滚动到元素上方时是否应设置动画
    anchorPlacement: 'top-bottom', // 定义与窗口有关的元素的哪个位置应触发动画
});

2.2 使用 data-aos 属性设置动画

<div data-aos="fade-in"></div>

使用 data-aos-* 来调整行为

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing