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

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

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

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

以下は同じようなカウントアニメーションができるタイプのものです。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秒かけてカウントアップ、小数点第2位を表示

<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)

機能

このプラグインは、主に状態を変更するための機能もサポートしています。関数は、名前を文字列としてcountTojQuery関数に渡すことで呼び出されます $(‘#timer’).countTo(‘stop’)

  • start タイマーが停止している場合は、タイマーを再開します。
  • stop 実行中の場合はタイマーを停止(一時停止)します。
  • toggle タイマーの現在の状態に基づいてタイマーを開始または停止します。
  • restart タイマーを最初の”from”値で再起動します。

参考になれば幸いです。


∞Tadashi Suyama∞

js web mobile
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

js web mobile
フッターイメージ