Wow.js插件库使用

什么是Wow.js

WOW.js是对animate.css的扩充，让页面滚动更有趣。我们通过WOW.js可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说：当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐显示出来。

//官方demo
https://www.delac.io/wow/

//各类效果展示
https://daneden.github.io/animate.css/

WOW.js的详细用法

1.下载wow.js文件

https://registry.npmjs.org/wowjs/-/wowjs-1.1.3.tgz

2.导入其中的wow.js文件和animate.css文件，并且在文件脚本中

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

3.将wow的类绑定元素

<div class="wow bounceInUp">
    WOW.js
</div>

4.高级选项

<div class="wow bounceInRight" data-wow-delay="1.5s"  data-wow-iteration="1">
    WOW.js
</div>

data-wow-duration：更改动画持续时间

data-wow-delay：动画开始前的延迟

data-wow-offset：开始动画的距离（与浏览器底部相关)

data-wow-iteration：动画的次数重复（无限次：infinite）

做完上面这些步骤，我们就已经可以实现动画效果了，但是有个问题，就是在页面触发时会一股脑全部出现，这达不到我们理想中的样子，我们是想要随着鼠标滚动来触发，那该怎么做呢？

5.另外的自定义选项

boxClass：用户滚动时显示隐藏框的类名。

animateClass：触发CSS动画的类名（animate.css库默认为“animated”）

偏移量：定义浏览器视口底部和隐藏框顶部之间的距离。当用户滚动并到达这个距离时，隐藏的框被显示出来。

手机：在移动设备上打开/关闭WOW.js。

live：自动检查页面上的新WOW元素。