wow实现页面滚动到指定区域时就显示动画的效果

WOW.js 是一个非常轻量级的动画效果插件，使用它可以组合多种炫酷的效果。
使用WOW.js可以实现我们在网站上常看到的，页面滚动到指定区域时就显示动画的效果。

1.下载文件

animate.css 下载地址: http://daneden.github.io/animate.css/   https://github.com/matthieua/WOW/tree/master/css/libs
wow.js 下载地址:  https://github.com/matthieua/WOW

animate动画样式名： https://animate.style/

2.引入文件

<link rel="stylesheet" href="animate.css">
<script src="wow.js"></script>
<script>
   new WOW().init();//wow是大写哦
</script>

3.在需要动画的标签上添加,wow 和 你的动画元素，如下代码：

<div class="row">
    <div class="wow rollIn bg-blue animated" >22</div>//rollIn 动画名称
    <div class="wow bounceInDown bg-red animated" data-wow-iteration="1" data-wow-duration="2.15s">22</div>
    <div class="wow slideInLeft bg-red animated" data-wow-iteration="1" data-wow-duration="2.15s">22</div>
//data-wow-iteration重复次数    data-wow-duration动画过程时间

属性说明：

a) class 必须含有 wow 类

b) class 需要含有animate.css
中的动画效果类，animate.css效果样式见：http://www.jq22.com/yanshi819

c) 属性： data-wow-duration 动画持续时间

d) 属性：data-wow-delay 动画延迟执行时间，比如过5秒后在执行动画

e) 属性：data-wow-offset
元素的位置露出后距离底部多少像素执行（比如，我想让该内容显示100像素的时候，才执行动画）

f) 属性：data-wow-iteration 动画执行的次数

加载JS代码：

 if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    
     //不在ie6-9中使用
     new WOW().init();
 };