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

简介

WOW.js的官网

WOW.js 的出现，让 Animate.css 有更多可玩性。

Animate.css 的用法可以看：【Animate.css】CSS动画库

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

WOW.js 的主要功能是实现页面向下滚动的过程中，逐渐释放 CSS 动画效果。

也就是说，当我们向下滚动页面时，可以省去很多判断条件，让 CSS 动画逐渐展示出来。

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

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

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

兼容性方面，和 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下载地址

当然也支持 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;}

就是这个效果

• sildeInLeft：从左边划入

• sildeInRight：从右边划入

• bounceIn：弹跳进入

以上就是基本用法。

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

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

来点高级点的玩法。

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

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>

因为左边的 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>

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