JS 流行库（七）：WOW

JS 流行库（七）：WOW

WOW.js 是 Animate.css 的扩充，以让页面滚动更加有趣，在页面滚动的过程中逐渐释放动画效果，示例如下：

WOW.js 首页;

即 WOW.js + Animate.css 类似于 swiper + swiper-animate

基本使用

1. 导入 wow.js 和 Animate.css 库

示例如下：

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

2. HTML 代码及样式

<div class="wow slideInLeft"> Div 1 </div>
<div class="wow slideInRight"> Div 2 </div>
<div class="wow slideInLeft"> Div 3 </div>
<div class="wow slideInRight"> Div 4 </div>
<div class="wow slideInLeft"> Div 5 </div>
<div class="wow slideInRight"> Div 6 </div>
<div class="wow slideInLeft"> Div 7 </div>
<div class="wow slideInRight"> Div 8 </div>
<div class="wow slideInLeft"> Div 9 </div>

在上述示例中，类名 wow 是 WOW.js 中的基类，类似于 Animate.css 中的 animated 类，而 slideInLeft 和 slideInRight 即为 Animate.css 中预定义的动画效果名称，此外，最新版本的 WOW.js 不支持最新版本的 Animate.css

3. 样式

* {
    margin: 0;
    padding: 0;
}

div {
    width: 100px;
    height: 80px;
    border: 1px solid black;
    color: orangered;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    border-radius: 5px;
    box-shadow: 0 0 10px black;
    margin: 50px auto;
}

div:nth-of-type(odd) {
    background-color: black;
}

3. JavaScript 代码

let wow = new WOW();
wow.init();

此外，WOW.js 也支持自定义动画持续时间、延迟时间以及执行次数等，示例如下：

<div class="wow slideInLeft"> Div 1 </div>
<div class="wow slideInRight" data-wow-duration="2s" data-wow-delay="5s" data-wow-iteration="10"> Div 2 </div>
<div class="wow slideInLeft"> Div 3 </div>
<div class="wow slideInRight"> Div 4 </div>
<div class="wow slideInLeft"> Div 5 </div>
<div class="wow slideInRight"> Div 6 </div>
<div class="wow slideInLeft"> Div 7 </div>
<div class="wow slideInRight"> Div 8 </div>
<div class="wow slideInLeft"> Div 9 </div>

另外，WOW.js 也支持自定义在网页滚动到某一特定位置时再释放动画，示例如下：

<div class="wow slideInLeft"> Div 1 </div>
<div class="wow slideInRight" data-wow-duration="2s" data-wow-delay="5s" data-wow-iteration="10"> Div 2 </div>
<div class="wow slideInLeft"> Div 3 </div>
<div class="wow slideInRight" data-wow-offset="500"> Div 4 </div>
<div class="wow slideInLeft"> Div 5 </div>
<div class="wow slideInRight"> Div 6 </div>
<div class="wow slideInLeft"> Div 7 </div>
<div class="wow slideInRight"> Div 8 </div>
<div class="wow slideInLeft"> Div 9 </div>

在上述示例中，data-wow-offset 属性的含义是当设置此属性的元素距离网页底部（默认）的距离为此属性值时，释放动画，此外，可以在初始化 WOW 实例时配置被参考的元素，示例如下：

<div class="box">
    <div class="wow slideInLeft"> Div 1 </div>
    <div class="wow slideInRight" data-wow-duration="2s" data-wow-delay="5s" data-wow-iteration="10"> Div 2 </div>
    <div class="wow slideInLeft"> Div 3 </div>
    <div class="wow slideInRight" data-wow-offset="500"> Div 4 </div>
    <div class="wow slideInLeft"> Div 5 </div>
    <div class="wow slideInRight"> Div 6 </div>
    <div class="wow slideInLeft"> Div 7 </div>
    <div class="wow slideInRight"> Div 8 </div>
    <div class="wow slideInLeft"> Div 9 </div>
</div>
<script>
    let wow = new WOW({
        scrollContainer: ".box"
    });
    wow.init();
</script>

高级使用

在 JavaScript 代码中初始化时，可以配置若干选项，如下所示：

选项	描述	默认值
boxClass	基类名称	‘wow’
animateClass	动画库名称	‘animated’
offset	统一的 offset 偏移量	0
mobile	是否在移动端执行动画	true
live	是否开启异步加载内容	true
callback	每当有元素执行动画时，执行此回调函数，将执行动画的元素传入此回调函数	function (box) { }
scrollContainer	偏移量被参考的元素	null

示例如下：

let wow = new WOW({
    boxClass: "wow",
    animateClass: "animated",
    offset: 0,
    mobile: true,
    live: true,
    callback: function (box) {
        console.log(box);
    },
    scrollContainer: ".box"
});
wow.init();