数字をカウントアップしたい時のjQueryプラグイン「jquery-numerator.js」

2018年1月1日2021年11月28日

数字をカウントアップできるjQueryプラグイン「jquery-numerator.js」を紹介します。

DEMO（デモ）

はにわまん

カウントアップのアニメーションは見ていてとても気持ちいいです！

ダウンロード

※ ver 0.2.1時点の内容です。

ソースコードはgithub上で管理されています。
→ garethdn/jquery-numerator

右上の「Download zip」からダウンロードしてください。

使い方

ライブラリを読み込む

jQueryに依存しますので、先にjQueryを読み込んでください。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery-numerator.js"></script>

表示させるアイテム

空のクラスを１つ用意します。javascript側で指定するので、クラス名はなんでもOKです。

<p class="my-value"></p>

numeratorの設定（初期化）

jQuery( function($) {
	$('.my-value').numerator( {
		easing: 'linear', // アニメーションの動き
		duration: 3000, // アニメーションの時間
		toValue: 1000, // どこまでカウントアップするか
		delimiter: ',', // ３桁ごとに区切る値
		rounding: 0 // 小数点以下の桁数
	});
});

特に説明しなくても、分かるかと思います。easing: 'linear'以外にどんな値が指定できるのかは分かりません…。