指定数値までカウントダウンアップアニメーションjQuery countTo

2018-04-29 最終更新日:2018-04-29

数値をカウントアップやカウントダウンのアニメーションを簡単に行うことができるプラグインのご紹介です。data属性で指定できて簡単そうなものを選びましたがすでに3年前のものですね。同じ名前のプラグインがありますがこちらの方が使いやすかったので選びました。あまり有名ではなさそうです。ですが機能は豊富でいろいろと使えそうです。

mhuggins/jquery-countTo: A jQuery plugin that will count up (or down) to a target number at a specified speed.

以下は同じようなカウントアニメーションができるタイプのものです。countUp.jsが有名どころでしょうか。

使い方

1.まずjQueryを読み込ませます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

2.プラグインを読み込ませます

<script src="build/jquery.countTo.js"></script>

3.カウントさせたい指定要素とdata属性で数値を設定するだけ

<div class="my-element" data-to="50">0</div>
<script>
	$('.my-element').countTo();
</script>

上記は0から50までカウントアップをアニメーションするようになります。

このプラグインを使用する主な方法は、DOMのdata属性と、countTo関数のオプションの2つです。

これらの2つの方法は、ミックスして使用することもできます。 data属性はJSオプションよりも優先されます。

以下の例はdata属性のdata-fromはスタート値でdata-toはゴール値になります。25から始まって150までカウントを行います。

<div class="timer1" data-from="25" data-to="150">25</div>

<script>
	$('.timer1').countTo();
</script>

以下のように記載しても同じことになります。jsオプション方法になります。

<div class="timer1"></div>
<script>
$('.timer1').countTo({
	from: 25,
	to: 75
});
</script>

以下の場合は3秒後にスタートし、0から100までを5秒でカウントアップします。

<div class="timer2" data-from="0" data-to="100" data-speed="5000" data-refresh-interval="3000">0</div>
<script>
	$('.timer2').countTo();
</script>

以下の例は0から500までをカウントアップします。

<div class="timer3">0</div>
<script>
	$('.timer3').countTo({
		from: 0,
		to: 500
	});
</script>

1秒後にスタートして50から2500までを3秒でカウントします。コールバック関数例。

<div class="timer4">50</div>
<script>
	$('.timer4').countTo({
		from: 50,
		to: 2500,
		decimals:1,
		speed: 10000,
		refreshInterval: 1000,
		formatter: function (value, options) {
			return value.toFixed(options.decimals);
		},
		onUpdate: function (value) {
			console.log(this);
		},
		onComplete: function (value) {
			console.log(this);
		}
	});
</script>

200からカウントダウンして0になったら最後にcomplete!!!を表示させます。

<div class="timer5">200</div>
<script>
$('.timer5').countTo({
		from: 200,
		to: 0,
		speed: 10000,
		refreshInterval: 1000,
		onComplete: function (value) {
			$(this).text('complete!!!').addClass('text-danger');
		}
	});
</script>

0から100までをカウントアップします。

<div class="timer-a" data-to="100">0</div>
<script>
	// 100までカウントする
	$(".timer-a").countTo();
</script>

0から9.8までを3秒かけてカウントアップ、小数点第２位を表示

<div class="timer-b" data-from="0" data-to="9.8" data-speed="3000" data-decimals="2">0</div>
<script>
	$(".timer-b").countTo();
</script>

0から3968までを10秒かけてカウントアップ、1000の位にカンマ

<div class="timer-c" data-to="3968" data-speed="10000">0</div>
<script>
	$('.timer-c').countTo({
		formatter: function (value, options) {
			return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
		}
	});
</script>

10から1までを10秒間でカウントダウン

<div class="timer-d" data-from="10" data-to="1" data-speed="10000">10</div>
<script>
	$(".timer-d").countTo();
</script>

0から1000までカウントアップするが完了後さらに1000が追加され2000までカウントする

<div class="timer-e" id="infinity" data-from="0" data-to="1000" data-speed="5000">0</div>
<script>
	$('.timer-e').countTo({
		onComplete: function (value) {
			$(this).countTo({
				from: value,
				to: value + 1000
			});
		}
	});
</script>

上記と同じサンプルは以下から確認できます。

⇒サンプルを見てみる

オプション値

()はdata属性

from / (data-from)：カウントを開始する番号。（デフォルト：0）
to / (data-to)：カウントを止める番号。（デフォルト：100）
speed / (data-speed)：カウントを終了するのに必要なミリ秒数。（デフォルト：1000）
refreshInterval / (data-refresh-interval)：カウンタをリフレッシュするまでの待機時間（ミリ秒）。（デフォルト：100）
decimals / (data-decimals)：デフォルトのフォーマッタを使用するときに表示する小数点以下の桁数です。（デフォルト：0）
formatter (value, options)：DOMにレンダリングする前に現在の値を書式設定するために使用されるハンドラです。真の現在の値とオプションセットは関数に渡され、DOM要素のコンテキストで実行されます。これは、フォーマットされた値を返す必要があります。（デフォルト： value.toFixed(options.decimals)）
onUpdate (value)：カウンタが更新するすべての繰り返しに対してトリガされるコールバック関数です。現在レンダリングされた値は関数に渡され、DOM要素のコンテキストで呼び出されます。（デフォルト：null）
onComplete (value)：カウントが終了するとトリガされるコールバック関数。最後にレンダリングされた値は関数に渡され、DOM要素のコンテキストで呼び出されます。（デフォルト：null）