WOW.js的用法

什么是WOW.js

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

在我们使用之前，可以看一下官方的demo：

https://www.delac.io/wow/

相信在看完官方的demo后，你对WOW.js应该有一定的了解了。除此之外，官方还提供了WOW.js的各种效果展示：

https://daneden.github.io/animate.css/

OK,回到正题，这么炫(zhuang)酷(bi)的东西，我该怎么用呢？

WOW.js的详细用法

   其实在官方已经贴出了很详细的用法了，如果有童鞋看完这篇文章还不会的话，可以考虑去官网看看。

1.引入animate.css

引入css文件之前，需要先下载wow.js文件：

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

下载完后，animate.css文件在package/css/libs下，我们把它放到你的项目中，然后在你需要使用的html页面的头部加入这样的一条代码：

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

2.引入WOW.js文件

在我们刚才下载那个tgz文件中找到package/dist下，下面有WOW.js与WOW.min.js两个js文件，两个之中我们挑一个用即可，把它放到你的项目中，然后引入：

<script src="js/wow.min.js" type="text/javascript"></script>

3.启动new.WOW.init()

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

4.在需要动画的标签上面添加class 注：wow必须加在动画类名前面

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

好的，那么，我们wow后面的bounceInUp是从哪儿来的呢？还记得那个官方给的各种动画效果展示的网站吗，没错，这个bounceInUp就是从官方给的效果展示的名称，如图

5.高级选项    

<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）

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

6.使用自定义配置

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

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

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

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

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

配置如下：

基本用法到这里就差不多了