AOS.js页面滚动动画插件（CSS3）

aos.js是一个用于在页面滚动的时候呈现元素动画的工具库，AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。

点击查看演示效果

如需要下载js可以在上方演示效果页面最后选择下载；

使用方法

在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="css/aos.css" />

<script src="js/aos.js"></script>

HTML结构

要使用aos动画库，你需要做的就是在需要动画的元素上添加aos属性，例如：

<div class="section shizi"  aos="fade-up"  aos-easing="ease"  aos-duration="700"  aos-delay="300">

aos脚本将会在页面滚动时，在该元素上触发相应的动画。

使用相对简单，可以实现很多你所看到的页面动画，淡入淡出、栏目依次延时显示等，功能强大，具体属性可以一一实验！

属性

动画

淡入淡出动画：

    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