指定数値までカウントダウンアップアニメーション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

サイト内検索

最近の投稿

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

アイキャッチ
macOS Mojaveを早速インストールしてみた感想

さて、いつもなら安定してきたぐらいにアップデートを行うのですが今回は時間もあったのでmacOS Mojaveにアップデートをしてみました。 入れてみてすぐに感じた感想は重い。。。もっさり感が半...

24 Oct 2018

アイキャッチ
ムーバブルタイム(MT)からワードプレスのインポート

今回はムーバブルタイプからワードプレスのインポートについてです。デフォルトで使っている場合の記事は多くありますのでそちらをご参考になさってください。今回はアーカイブテンプレートでアーカイブパスを...

23 Oct 2018

著者

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

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

タグクラウド

js web mobile
フッターイメージ