countup.jsを使用してデジタルダイナミックオーバーレイを作成（デジタルダイナミックエフェクト、デジタルダイナミックトランスフォーメーションの表示に適用可能）

CountUp.jsは、依存関係のない軽量のJavaScriptクラスであり、数値データをより興味深いアニメーションですばやく作成および表示するために使用できます。その名前はcountUpですが、実際には2つの方向に変化する可能性があります。これは、渡したstartValおよびendValパラメータに基づいています。ホイールイベントの判断と相まって...... 

構成可能なパラメーター：

• target =ターゲット要素のID。

• startVal =開始値;

• endVal =最終値;

• 小数=小数点以下の桁数、デフォルト値は0です。

• duration =秒単位のアニメーション遅延。デフォルト値は2です。

例： 

var options = {

  useEasing: true, 
  useGrouping: true, 
  separator: ',', 
  decimal: '.', 
};
var demo = new CountUp('myTargetElement', 0, 4068, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

インストール： 

npm i countup.js

Vueで使用：

<template>
  <h1><span
      ref='countup'
      class="text"
    ></span>
  </h1>
</template>

<script>
import { CountUp } from 'countup.js'
export default {
  name: 'Countup',
  data () {
    return {
      options: {
        startVal: 1000
      },
      endCount: 2019
    }
  },
  mounted () {
    this.initCountUp()
  },
  methods: {
    initCountUp () {
      let demo = new CountUp(this.$refs.countup, this.endCount, this.options)
      if (!demo.error) {
        demo.start()
      } else {
        console.error(demo.error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  color: #4d63bc;
  font-size: 16px;
}
</style>