aos.js是一款强大的网页滚动元素添加入场动画插件-BFW插件库

aos.js是一款强大的网页滚动元素添加入场动画插件

AOS.js（Animate On Scroll Library）是一款强大而轻便的JavaScript插件，用于在网页滚动时添加动画效果，从而增强用户的互动体验。这种动画效果可以让元素在进入可视区域时以动画的形式显示，增加页面的吸引力和现代感。AOS.js非常容易集成到任何网站中，并与Bootstrap等框架兼容。

安装AOS.js

有几种方法可以将AOS.js添加到您的项目中：

直接从CDN下载：

<!-- AOS CSS -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aos.2.3.4.css">

<!-- AOS JavaScript -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aos.2.3.4.js"></script>

使用NPM或Yarn：

npm install aos --save

# 或

yarn add aos

如何使用AOS.js

一旦安装了AOS.js，您只需在您的HTML元素中添加data-aos属性即可。然后在您的JavaScript中初始化库：

<!DOCTYPE html>
<html lang="en">
<head>
<!-- AOS CSS -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aos.2.3.4.css">


</head>
<body>

<div data-aos="fade-up">
<!-- 内部内容 -->
元素内容
</div>

<!-- AOS JavaScript -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aos.2.3.4.js"></script>

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

<!-- 页面的其他脚本和内容 -->

</body>
</html>

AOS入场动画方式种类：

fade: 元素逐渐显现或消失。

fade-up: 元素向上滚动并逐渐显现。

fade-up-right: 元素向右上方滚动并逐渐显现。

fade-up-left: 元素向左上方滚动并逐渐显现。

fade-down: 元素向下滚动并逐渐显现。

fade-down-right: 元素向右下方滚动并逐渐显现。

fade-down-left: 元素向左下方滚动并逐渐显现。

fade-left: 元素向左滚动并逐渐显现。

fade-right: 元素向右滚动并逐渐显现。

flip-up: 元素向上翻转并逐渐显现。

flip-down: 元素向下翻转并逐渐显现。

flip-left: 元素向左翻转并逐渐显现。

flip-right: 元素向右翻转并逐渐显现。

zoom-in: 元素逐渐放大。

zoom-out: 元素逐渐缩小。

rotate: 元素逐渐旋转。

slide-up: 元素向上滑动并逐渐显现。

slide-down: 元素向下滑动并逐渐显现。

slide-left: 元素向左滑动并逐渐显现

slide-right: 元素向右滑动并逐渐显现。

AOS配置选项

可以在AOS.init()中设置：

duration：动画持续时间，以毫秒为单位。

delay：动画延迟时间，以毫秒为单位。

once：设置为true时，动画只播放一次（不会在再次滚动时重复出现）。

AOS.init({
duration: 1200,
delay: 200,
once: false, // 是否只播放一次动画
});

您还可以为单个元素定义不同的动画效果和配置：

<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
<!-- 内部内容 -->
</div>

在上面的例子中，当元素滚动到视口中时，将会以从下向上淡入的形式，持续1秒钟（1000毫秒），并在开始动画前延迟200毫秒。

兼容性提示

AOS.js适用于所有现代浏览器，包括Chrome，Firefox，Safari，Edge等。但需要注意的是，一些较旧的浏览器，如Internet Explorer，可能不完全支持。

aos.js是一款强大的网页滚动元素添加入场动画插件

网友评论0

xRoll.js

gototop.js

bfwscroll.js

parallax.js

pushIn.js

wow.js

jquery.tiltedpage-scroll.js

ScrollMagic.min.js

jquery.mousewheel.js

perfect-scrollbar.js