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 （布尔值）
})
网友评论