wow.js和animate.css让页面更有趣

最近一直写静态的页面写的有点烦躁，突然想到可以写点运动效果，让自己也高大上一回。

wow.js依赖于animate.css，并不依赖jquery。

对ie老版本不兼容，所以要做特别处理。

1、首先引入animate.css和wow.js

```

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

```

2、HTML

```

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

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

```

可以加入data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（距离启动动画-相关浏览器底部）、data-wow-iteration（循环次数）

动画方式

bounceInDown、bounceInUp、bounceInLeft、slideInLeft、slideInRight、bounceInRight、flipInX、shake、swing、lightSpeedIn、pulse、rollIn

3、JS

```

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

var wow = new WOW({

boxClass: 'wow', //默认值‘wow’，执行动画元素的class

animateClass: 'animated', //默认‘animated’，animate.css动画的css

offset: 0, //默认0，距离可视区域多少开始执行动画

mobile: true, //默认ture，是否支持手机

live: true //默认ture，异步加载是否有效

});

wow.init();

```