详解动画插件wow.js的使用方法

时间：2023-12-08

详解动画插件 wow.js 的使用方法

简介

Wow.js 是一款轻量级的 JavaScript 库，可以在网页滚动时为网页元素添加动画效果。这个库的优点是易于集成，使用简单，而且具有可自定义的选项。

安装

Wow.js 依赖于 Animate.css 库，所以它需要先引入 Animate.css。通过 CDN 或者下载到本地都可以。

然后，下载或者通过 CDN 引入 wow.js，也可以通过 NPM 安装：

npm install wow.js --save

用法

先在 HTML 文档中引入 Wow.js 和 Animate.css：

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

然后在 JavaScript 中初始化 Wow.js：

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

参数

Wow.js 支持一些可选的选项，可以在初始化时传入一个选项对象。下面是可用的选项：

boxClass：默认为 wow，用来定义哪些元素将触发动画。
animateClass：默认为 animated，定义动画属性的 CSS 类名称。
offset：默认为 0，定义元素进入视窗的偏移量，单位是像素(px)。

下面是一个初始化时传入选项的代码示例：

<script>
  new WOW({
    boxClass: 'wow-custom',
    animateClass: 'animated-custom',
    offset: 100
  }).init();
</script>

例子

在下面的示例中，我们将为页面上的两个元素添加动画效果。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello, Wow.js</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
  <style>
    .box {
      width: 300px;
      height: 200px;
      background: #eee;
      margin: 50px auto;
      text-align: center;
      line-height: 200px;
      font-size: 60px;
      color: #fff;
    }

    .box1 {
      background: #f00;
    }

    .box2 {
      background: #00f;
    }
  </style>
</head>

<body>
  <div class="box wow" data-wow-duration="2s">
    Hello, Wow.js!
  </div>

  <div class="box box1 wow" data-wow-offset="100" data-wow-delay="0.5s">
    Animate.css + Wow.js
  </div>

  <div class="box box2 wow" data-wow-duration="3s" data-wow-iteration="10" data-wow-delay="1s">
    That's amazing!
  </div>

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

</html>

在上面的代码中，我们为三个 DIV 元素添加了 .box、.box1、.box2 类。其中，第一个元素只添加了 .wow, 其他两个元素添加了更多的 wow.js 参数。在示例代码中，分别使用了 data-wow-offset、data-wow-duration、data-wow-delay、data-wow-iteration 这些 HTML5 的属性来定义动画的选项。

初次加载页面，我们可以看到四个元素分别出现了动画效果，其中包括了一些自定义的选项，比如延时，偏移和循环等。

注意，以上仅仅是 wow.js 的入门介绍，想要使用更多的效果，可以去其官网查看具体 API 与使用场景。

上一篇：CSS3动画和HTML5新特性详解 下一篇：es6函数之rest参数用法实例分析

详解动画插件wow.js的使用方法

详解动画插件 wow.js 的使用方法

简介

安装

用法

参数

例子

相关文章