animate.css与wow.js 页面滚动加载动画

animate.css与wow.js组合可以让页面滚动加载动画。制作绚丽网页

浏览器兼容：

animate（只兼容支持 css3 animate 属性的浏览器），分别为：IE10+、firefox、Chrome、Opera、Safari； 

wow.js （兼容支持同animate）而 wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。

Animate使用方法（单独使用）

1.下载animate.css文件，并引入文件：<link rel="stylesheet" href="animate.min.css">

2.HTML及使用：<div class="animated fadeIn" id="myId"></div>

给元素加上 class 后，刷新页面就能看到动画效果。

animated 类似于全局变量，它定义了动画的持续时间；fadeIn 是动画效果的名称，你可以选择任意的效果。 class 加上 infinite 可设置动画为无限循环播放。

3.使用 JS 或者 JQuery 给元素添加 class，例如：

$(function(){   

//淡入效果

$('#myId').addClass('animated fadeIn');

//删除 class 让元素不可见

setTimeout(function(){

$('#myId').removeClass('fadeIn')

})，1000

})

4.可以重新自定义animate的默认设置

#myId{

animate-duration:2s;    //动画持续时间

animate-delay：1s;   //动画延迟时间

animate-iteration-count:2;    //动画执行次数

}

Wow.js使用方法：

wow.js依赖于animate.css

1.引入 wow.js 与 animate.css 文件

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

<script type="text/javascript" src="wow.js"></script>

2.HTML

<div class="wow fadeIn" data-wow-duration="2s" data-wow-offset="10" data-wow-iteration="10" data-wow-delay="5s"></div>

data-wow-duration：动画持续时间

data-wow-offset：距离可视区域多少开始执行动画

data-wow-iteration：动画执行次数（无限次：infinite）

data-wow-delay：动画延迟时间

3. JS

new WOW().init();   //初始化wow方法

注意：执行动画的元素需为块级元素

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

var wow = new WOW({

  boxClass:'wow',                      //需要执行动画的元素的 class ；属性值默认为 wow （字符串）

 animateClass:'animated',        //动画的样式 class ；属性值默认为 animated （字符串）

 offset:0,                                   //距离可视区域多少开始执行动画；默认值为 0（整数）

 mobile:true,                            //是否在移动设备上执行动画；默认值为 true（布尔值）

live:true                                  //异步加载的内容是否有效；默认值为 true （布尔值）

})