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 代码中初始化时，可以配置若干选项，如下所示：

示例如下：

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