使用 AOS 在鼠标滚动时为 div 设置动画

AOS（Animate On Scroll）是一款方便易用的 JavaScript 库，通过监听滚动事件实现对网页元素的动画效果。本文将介绍如何使用 AOS 为 div 设置动画效果。

步骤

1. 下载 AOS

可以在官方网站 https://michalsnik.github.io/aos/ 下载最新版本的 AOS。下载完成后，将以下链接添加到 HTML 文档的 head 标签中。

<link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.3.4/dist/aos.css" />

同时，将以下链接添加到 body 标签的末尾。

<script src="https://cdn.rawgit.com/michalsnik/aos/2.3.4/dist/aos.js"></script>

2. 编写 HTML

在 HTML 文档中，定义一个 div 元素，并提供一个样式名（例如“my-div”），作为设置动画效果的目标元素。

<div class="my-div">Hello, world!</div>

3. 编写 CSS

在 CSS 文件中，为 my-div 类添加样式，以控制目标元素的外观。为了在滚动时触发动画效果，在样式中设置以下属性：

.my-div {
  opacity: 0;
  transition: opacity 1s ease-in;
}

上述样式定义了目标元素初始状态的不透明性为0（即不可见），并设置了一个渐变过渡效果，使目标元素在1秒内从不可见渐变到完全可见的状态。

4. 初始化 AOS

在 body 标签中添加以下代码，初始化 AOS 并启动滚动监听功能。

<script>
  AOS.init();
</script>

5. 测试

将 HTML 文件保存并在浏览器中打开，然后向下滚动页面，目标元素将以渐变效果出现在屏幕上。

效果预览

总结

使用 AOS 实现在鼠标滚动时为 div 设置动画效果是非常简单的。只需要下载 AOS 包，编写 HTML 和 CSS 以及初始化 AOS 即可。AOS 还支持多种动画类型，可以根据需要进行选择。