Js 之aos.js页面滚动动画

Posted 2021-06-16 样子2018

下载：https://codeload.github.com/michalsnik/aos/zip/master

1、引入

<link rel="stylesheet" href="dist/aos.css" />
<script src="js/jquery.min.js"></script>
<script src="dist/aos.js"></script>

2、属性

属性	属性	属性	默认值
aos-offset	是立刻触发动画还是在指定时间之后触发动画	200	120
aos-duration	动画持续时间	600	400
aos-easing	动画的easing动画效果	ease-in-sine	ease
aos-delay	动画的延迟时间	300	0
aos-anchor	锚元素。使用它的偏移来取代实际元素的偏移来触发动画	#selector	null
aos-anchor-placement	锚位置，触发动画时元素位于屏幕的位置	top-center	top-bottom
aos-once	动画是否只会触发一次，或者每次上下滚动都会触发	true	false

<div aos="fade-up" aos-anchor-placement="top-center">

如果你不想单独每个元素做一个动画配置，你可以通过init()方法来统一配置所有元素的动画效果。

AOS.init({  easing: \'ease-out-back\', duration: 600, });

3、动画

淡入淡出动画：

• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left

翻转动画：

• flip-up
• flip-down
• flip-left
• flip-right

滑动动画：

• slide-up
• slide-down
• slide-left
• slide-right

缩放动画：

• zoom-in
• zoom-in-up
• zoom-in-down
• zoom-in-left
• zoom-in-right
• zoom-out
• zoom-out-up
• zoom-out-down
• zoom-out-left
• zoom-out-right

锚位置

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

easing动画

你可以使用以下的一些easing动画效果：

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart