The Vue3 project uses wow.js to make page scrolling more interesting~

foreword

wow.js is a plug-in library that can gradually release animation effects during page scrolling, making page scrolling more interesting.

Official website: wow.js — Reveal Animations When Scrolling

Parameter description:
data-wow-duration: change the duration of the animation
data-wow-delay: the delay before the animation starts
data-wow-iteration: the number of times the animation is repeated (infinite times: infinite)
data-wow-offset: the distance to start the animation (the length of the element from the bottom of the browser)

1. Import dependencies

(1) Note that wow.js already comes with animate.css

npm i wow.js -D

2. Example code

（1）src/views/Example/WOWjs/index.vue

<template>
  <div>
    <ul>
      <li class="wow rollIn" style="background-color: #5ac4ff">wow rollIn</li>
      <li class="wow rollIn" data-wow-duration="2s" data-wow-delay="3s" style="background-color: lightgreen">wow rollIn</li>
      <li class="wow rollIn" data-wow-offset="600"  data-wow-iteration="10" :style="'background-color: ' + randomRGBA()">wow rollIn</li>
      <li class="wow lightSpeedIn" :style="'background-color: ' + randomRGBA()">wow lightSpeedIn</li>
      <li class="wow swing" :style="'background-color: ' + randomRGBA()">wow swing</li>
      <li class="wow pulse" :style="'background-color: ' + randomRGBA()">wow pulse</li>
      <li class="wow flip" :style="'background-color: ' + randomRGBA()">wow flip</li>
      <li class="wow flipInX" :style="'background-color: ' + randomRGBA()">wow flipInX</li>
      <li class="wow bounce" :style="'background-color: ' + randomRGBA()">wow bounce</li>
      <li class="wow bounceInDown" :style="'background-color: ' + randomRGBA()">wow bounceInDown</li>
      <li class="wow bounceInUp" :style="'background-color: ' + randomRGBA()">wow bounceInUp</li>
      <li class="wow bounceInLeft" :style="'background-color: ' + randomRGBA()">wow bounceInLeft</li>
      <li class="wow bounceInRight" :style="'background-color: ' + randomRGBA()">wow bounceInRight</li>
    </ul>
  </div>
</template>
 
<script>
import WOW from 'wow.js'
 
export default {
  data: () => ({
 
  }),
  mounted() {
    const 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()
  },
  methods: {
    randomRGBA() {
      const rs = 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'
      return rs
    }
  }
}
</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="wow.js/css/libs/animate.css"></style>

(2) When the scroll bar returns to the wow node, the animation is triggered again

3. Operation effect