wow.js

核心作用：让页面滚动更有趣

使用

• 配合Animate.css使用
• github中搜索wow，下载
• 1.引用库

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

• 2.将类wow添加到要动画的元素,后面可以就使用animate的动画库的类

<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>

• 3.使用new关键字创建wow对象然后init初始化调用

<script>
    new WOW().init();
</script>

wow常见属性

• data-wow-delay: 动画开始前延迟
  <div class="wow slideInLeft" data-wow-delay="3s"></div> //延迟3s，执行这个动画
• data-wow-duration: 动画持续时长
  <div class="wow slideInLeft" data-wow-duration="3s"></div> //这个动画持续3s钟
• data-wow-iteration: 动画重复次数
  <div class="wow slideInLeft" data-wow-iteration="2"></div> //这个动画重复2次
• data-wow-offset: 距离浏览器底部到隐藏框顶部的距离（偏移量）
  此处的偏移量 = 滚动条的高度（scrollTop()）+当前浏览器的高度（height()）- 控件距浏览器顶部的top值

vScroll = $(window).scrollTop();
//            console.log(vScroll);
            //求出当前浏览器的高度
            vCHeight = $(window).height();
//            console.log(vCHeight);
            //求出test控件距离定位的top值
            vTop = $('#test').offset().top;
            //求出wowoffset值
            wowOffsetTop = (vScroll+vCHeight)-vTop;

• 总结

<div id="test" class="wow slideInRight" data-wow-offset="400"></div>
//当滚动条滚动到这个偏移量位置的时候会触发动画

wow参数配置

• WOW的默认配置参数
• 不仅仅可以使用 new WOW().init();初始化，也可以使用下面方法。

var wow = new WOW({
       boxClass: 'wow', // 动画元素的CSS类（默认类名wow）           
       animateClass:'animated', // 动画CSS类 （默认类名animated） 
       offset: 0, // 距离可视区域多少开始执行动画（默认为0）           
       mobile: true, // 是否在移动设备上执行动画 （默认是true）
 });
wow.init();

• 还可以自定义配置参数