各大网站常用的页面加载动画

一、使用场景

经常见到某些网站的动画是在屏幕显示到当前元素的时候，会有个过渡动画。

页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意

使用wow.js和Animate.css，实现各大网站常用的页面加载动画

1.wow.js

实现了在网页滚动时的动画效果，有漂亮的动画效果，依赖于Animate.css。

2.Animate.css

非常优秀的CSS3动画库，不依赖于jQuery，纯CSS动画

二、使用方法

1,下载文件

animate.css 下载地址: 网址前缀+daneden.github.io/animate.css/

wow.min.js 下载地址: 网址前缀+

2,引入文件

<link rel="stylesheet" href="css/animate.css" rel="external nofollow" >

<script src="js/wow.min.js"></script>

3、HTML

<div class="wow slideInLeft"></div>

<div class="wow slideInRight"></div>

可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）

属性，如：

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>

<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>

4、JavaScript

new WOW().init();

要自定义配置，可如下使用：

var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

});

wow.init();

三、兼容性

四、配置属性