Vue3项目使用 wow.js 让页面滚动更有趣~

wow.js是一个可以在页面滚动的过程中逐渐释放动画效果，让页面滚动更有趣的一个插件库。

官网：wow.js — Reveal Animations When Scrolling

本文就演示一下如何在Vue3项目使用 wow.js，颇为简单~

1、导入依赖，注意 wow.js 已经自带 animate.css

npm install wowjs --save-dev

2、在想要动画效果的 vue 页面，加载 wow.js 资源

<script>
import { WOW } from 'wowjs'

export default {
  data: () => ({

  }),
  mounted() {
    let wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window
    });
    wow.init()
  },
}
</script>

<style src="wowjs/css/libs/animate.css"></style>

3、在 vue 页面写上具有 wow.js 效果的html代码

<template>
  <div style="padding: 100px">
    <div class="wow rollIn" data-wow-duration="2s" data-wow-delay="3s" style="width: 100%; height: 100px; background-color: lightblue">wow rollIn</div>
    <div class="wow rollIn" data-wow-offset="10"  data-wow-iteration="10" style="width: 100%; height: 100px; background-color: lightgreen">wow rollIn</div>
  </div>
</template>

示例代码

src/views/Example/WOWjs/index.vue

<template>
  <div>
    <ul>
      <li class="wow rollIn" data-wow-duration="2s" data-wow-delay="3s" style="background-color: lightblue">wow rollIn</li>
      <li class="wow rollIn" data-wow-offset="10"  data-wow-iteration="10" style="background-color: lightgreen">wow rollIn</li>
      <li class="wow rollIn" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow rollIn</li>
      <li class="wow lightSpeedIn" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow lightSpeedIn</li>
      <li class="wow swing" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow swing</li>
      <li class="wow pulse" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow pulse</li>
      <li class="wow flip" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow flip</li>
      <li class="wow flipInX" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow flipInX</li>
      <li class="wow bounce" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow bounce</li>
      <li class="wow bounceInDown" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow bounceInDown</li>
      <li class="wow bounceInUp" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow bounceInUp</li>
      <li class="wow bounceInLeft" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow bounceInLeft</li>
      <li class="wow bounceInRight" :style="'background-color: ' + 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'">wow bounceInRight</li>
    </ul>
  </div>
</template>

<script>
import { WOW } from 'wowjs'

export default {
  data: () => ({

  }),
  mounted() {
    let wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window
    });
    wow.init()
  },
}
</script>

<style lang="less" scoped>
  ul {
    width: auto;
    height: auto;
    padding: 100px 250px;
    list-style: none;

    li {
      width: 100%;
      height: 150px;
      margin: 50px 0;
      color: #fff;
      text-align: center;
      line-height: 150px;
      font-size: 20px;
    }
  }
</style>

<style src="wowjs/css/libs/animate.css"></style>

效果如下~