wow.js实现炫酷的页面滚动伴随动画示例详解

前言

最近接了一个学校招生网站的需求，很常规的H5页面，但是在H5上，需要实现一些动画——随着页面的滚动，滚动条滚动到某个位置时候，去加载动画，动画的样式随机，简单即可。

想法

当时的第一反应就是，监听页面的元素有没有进入可视区域，如果进入可视区域的话，用一个变量进行判断 ，当为true 的时候，则进行一个animate 的动画显示即可。但是因为页面特别的长，内容也很多，感觉这个方法效率有点低 。于是打找一个适合的插件实现这个功能。

插件的选择

各种技术文章的查询，找到了一个非常适合的插件。Wow.js 和animate.css的配合使用。

animate.css就不多加赘述了，说白了就是动画插件，有很多动画，通过增加类名，就可以实现动画。

Wow.js 就是配合animate 去使用。 他又很多配置项，让我们去完成个性化的配置

插件的使用

  "dependencies": {
    "amfe-flexible": "^2.2.1",
    "animate.css": "^4.1.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "wow.js": "^1.2.2"
  },

因为我是用vue3+vite 去使用这个项目，所以直接npm 这两个插件即可

。接着根据官网的提示，要再main.js 中，引入两个css 文件

接下来，我们就是针对页面进行操作了

初始化wow.js的配置项

页面中，我们要先引入wow.js的包，然后在onMounted 中，对wow.js 做一个初始化的配置：

onMounted(() => {
  var wow = new WOW({
    boxClass: 'wow', // 需要执行动画的元素的 class; 【String类型】默认值：‘wow'；
    animateClass: 'animated', // animation.css 动画的 class; 【String类型】默认值：‘animated'；
    offset: 0, // 距离可视区域多少开始执行动画；【整数Number类型】默认值：0；
    mobile: true, // 是否在移动设备上执行动画；【Boolean类型】默认值: true;
    live: true // 异步加载的内容是否有效；【Boolean类型】默认值: true;
  });
  wow.init();
})

以上这个初始化的配置项都是有介绍的，大家可以针对不同的需求，进行不同的配置

对Dom元素进行绑定类名

   <img src="@/assets/image/pic1/base2.png" class="wow animate__fadeInLeft" data-wow-duration="2s"
        data-wow-delay="2s" data-wow-offset="10" data-wow-iteration="1">

这里面的类名，wow 说白了就是wow.js配置项中的boxClass的绑定，后面那个animate__fadeInLeft 则是animate.css中选中的动画样式进行绑定 。（我所选中的是从左侧进入） 接下来，后面的四个参数分别对应的意思如下

1、data-wow-duration：更改动画持续时间

2、data-wow-delay：动画开始前的延迟

3、data-wow-iteration：动画的次数重复（无数次：infinite）

4、data-wow-offset：开始动画的距离

其实到这一步，这些配置项就已经配置完成了。

我们就可以进行页面的滚动动画了。