aos.js插件

AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。

他的官网是：http://michalsnik.github.io/aos/

他的使用方法很简单。

加载css

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

加载js

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

然后初始化就好了

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

方法非常简单。

最后在你想它出现效果的元素上加上data-aos的属性就好了。例如

<div data-aos="fade-up"></div> 
<div data-aos="fade-down"></div> 
<div data-aos="fade-right"></div>

当屏幕滚动的他的位置时他就会出现相应的css3动画效果了

aos还有以下属性可以添加

例如

<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">

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

版权声明：本文为博主原创文章，未经博主允许不得转载。