WOW.js插件在H5页面开发时很常用
会在页面刚刚打开时产生动画特效，很酷炫噢！
官网：http://mynameismatthieu.com/WOW/
下载地址：https://github.com/matthieua/WOW
使用步骤：
1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。在最底部引用wow.js或者wow.min.js。（无需JQ）
2.在所设置的元素的class中添加一个“wow”和一个wow.js中的类名（在class中是可以设置多个类的）。
3.所设置的元素必须是必须设置为块状或者行内块状。
4.然后在js中加入代码
wow = new WOW({
boxClass: 'wow', // default 盒子类名
animateClass: 'animated', // default 为animate.css触发css动画的库
offset: 0, // default 偏移量
mobile: true, // default 是否支持手机
live: true // default 检查新元素
})
new WOW().init();
即可使用。
还可以在元素中加入如下属性，产生特别的效果，可选可不选：
<div class="wow bounce " data-wow-delay="1.5s" data-wow-iteration："1"></div>
data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）
wow.js定义的类：
wow rollIn从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
wow slideInUp从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight从右往左、上来后固定到设定位置、透明度为设定值不变
wow lightSpeedIn从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX原位置后仰前栽、透明度从100%变化至设定值
wow flipInY原位置左右旋动、透明度从100%变化至设定值
wow bounce上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变
例子：
<!DOCTYPE html>
<html>
<head>
<title>wowTest</title>
<script type="text/javascript" src="wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css"></style>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.warp{
height: 600px;
width: 600px;
background: pink;
}
.box{
height: 200px;
width: 200px;
background: blue;
}
</style>
<body>
<div class="warp">
<div class="box wow slideInUp">uuuuuuuuuu</div>
</div>
<script type="text/javascript">
wow = new WOW({
boxClass: 'wow', // default 盒子类名
animateClass: 'animated', // default 为animate.css触发css动画的库
offset: 0, // default 偏移量
mobile: true, // default 是否支持手机
live: true // default 检查新元素
})
new WOW().init();
</script>
</body>
</html>
网友评论