Vue3 プロジェクトは wow.js を使用してページのスクロールをより面白くしています~

序文

wow.js は、ページのスクロール中にアニメーション効果を徐々に解放して、ページのスクロールをより面白くすることができるプラグイン ライブラリです。

公式ウェブサイト: wow.js — スクロール時にアニメーションを表示

パラメータの説明:
data-wow-duration: アニメーションの長さを変更します
data-wow-lay: アニメーションが開始するまでの遅延
data-wow-iteration: アニメーションの繰り返し回数 (無限回: 無限)
data-wow- offset: アニメーションを開始するまでの距離 (ブラウザの下部からの要素の長さ)

1. 依存関係をインポートする

(1) wow.js にはすでに animate.css が付属していることに注意してください

npm i wow.js -D

2. コード例

（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) スクロール バーが wow ノードに戻るように設定すると、アニメーションが再度トリガーされます

3. 運用効果