【WOW.js】Animate.css的黄金搭档

微信订阅号：Rabbit_svip

本节目录

WOW.js简介
WOW.js基础用法

【简介】

WOW.js的出现，让Animate.css有更多可玩性。
Animate.css的用法可以看：【Animate.css】CSS动画库

WOW.js 是轻量级类库，只依赖Animate.css。不依赖其他js库。

WOW.js的主要功能是实现页面向下滚动的过程中，逐渐释放CSS动画效果。
也就是说，当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐展示出来。

只需短短几行代码，就能实现很多特效。

当然，也可以个性化定制喜欢的风格，比如延迟、动画执行时长、偏移、重复执行次数等。

下面就是WOW.js的官网
WOW.js

微信订阅号：Rabbit_svip

官网很逗比，可以进入官网看看动画效果。

兼容性方面，和Animate.css是一样的。兼容IE10+和各大新版浏览器。

【用法】

1、首先要引入 Animate.css 和 WOW.js

<link rel="stylesheet" href="../animate.css">
<script src="wow.js"></script>

Animate.css在官网有，可以看【Animate.css】CSS动画库

WOW.js下载地址：https://github.com/matthieua/WOW
当然也支持 Bower 和 npm 这两种方式下载。

2、实例化构造函数，调用基础方法。

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

说法是很牛的，但其实就是在js里面写上一句话 new WOW().init();

3、写html结构

<div class="box">
  <div class="wow slideInLeft"></div>
  <div class="wow bounceIn"></div>
  <div class="wow slideInRight"></div>
</div>

可以看到有一个大的 box 盒子，里面放着3个子div。

每个子div都有一个wow类，wow类就相当于Animate.css里的animated这个基础类。

wow类是一定要的，因为它是一个基础类，如果不写上，后面一切都是徒劳。

wow类后面跟着的是动作类名，可以在Animate.css里面找。

4、最后我给这些div写一点样式，让它们能在页面中展示出来。

.box {
  width: 900px;
  margin: 100px auto;
  display: flex;
}

.box div {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.box div:nth-child(1) {
  background-color: #9C89B8;
}

.box div:nth-child(2) {
  background-color: #F0A6CA;
}

.box div:nth-child(3) {
  background: #B8BEDD;
}

微信订阅号：Rabbit_svip

就是这个效果

sildeInLeft：从左边划入
sildeInRight：从右边划入
bounceIn：弹跳进入

以上就是基本用法。

上面的基础用法，看上去好像和Animate.css没什么区别。但如果我的页面是比较长的，而每个部分都有相应的动画，这时区别就出来了。

微信订阅号：Rabbit_svip

比如我的结构是这样的，下面还有很多个这种结构，只要页面向下滚动，对应元素在浏览器窗口中显示出来，就立即执行动画。

微信订阅号：Rabbit_svip

来点高级点的玩法。

在html元素上，还可以加上以下4个属性

data-wow-delay：动画延迟执行
data-wow-duration：动画执行时长
data-wow-iteration：动画重复执行次数
data-wow-offset：元素的位置露出后距离浏览器底部多少像素执行（偏移量）

data-wow-delay 动画延迟执行

<div class="box">
  <div class="wow slideInLeft" data-wow-delay="500ms"></div>
  <div class="wow bounceIn"></div>
  <div class="wow slideInRight"></div>
</div>

微信订阅号：Rabbit_svip

data-wow-delay 可以传毫毛（ms），也可以传秒（s）。

data-wow-duration 动画执行时长

<div class="box">
  <div class="wow slideInLeft" data-wow-duration="300ms"></div>
  <div class="wow bounceIn"></div>
  <div class="wow slideInRight"></div>
</div>

微信订阅号：Rabbit_svip

data-wow-duration 也是可以传毫秒（ms），也可以传秒（s）。

data-wow-iteration 动画重复执行次数

<div class="box">
  <div class="wow slideInLeft" data-wow-iteration="2"></div>
  <div class="wow bounceIn"></div>
  <div class="wow slideInRight"></div>
</div>

微信订阅号：Rabbit_svip

因为左边的div设置了data-wow-iteration=“2”，所以它的动画执行了2次。

data-wow-offset

元素的位置露出后距离浏览器底部多少像素执行（偏移量）

这个参数主要是滚动的时候用来控制动画时机。

比如

<div class="box">
  <div class="wow slideInLeft"></div>
  <div class="wow bounceIn" data-wow-offset="800"></div>
  <div class="wow slideInRight"></div>
</div>

效果我就不展示了，可以在自己的编辑器上面写写看。