Webページ上になにかの実績数や投票数、SNSのシェア数などの数値を表示する際に
単純に数字を表示するだけでなく数字がカウントアップするアニメーションをつけることで
ユニークな見た目でのインパクトある演出で数字を印象づけることができます。

そんな数値のカウントアップアニメーションを
jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。

jQueryで数字をカウントアップしながら表示する方法

「jQueryで数字をカウントアップしながら表示する方法」サンプルを別枠で表示

Webページ上に配置された数字がページロードと共にカウントアップされ
設定した数値で最終的に止まって表示されます。

数字は開始番号と最終的に表示する値までを指定し、カウントアップアニメーションします。
アニメーションするスピードも設定可能です。

全体構成についてまずはHTMLから。

◆HTML
<p class="count" data-num="100">0</p>

実装させるタグはブロック要素とインライン要素のどちらでも可能です。
タグ自体に動作を実装させることも可能ですが、
サンプルではクラス「.count」をつけたものに実装する構成にしています。

実装するタグの中身に開始番号を指定し、
「data-num」属性を使って最終的に止まって表示する数値を指定します。

このサンプルの場合は、
「0」から「100」までカウントアップアニメーションします。

タグで囲われた開始の数字を「50」といった値にすることで、
「50」から「100」までのカウントアップアニメーションを実装することができます。

このサンプルではCSSの指定は特に動作に影響しないので割愛しますが、
フォントの種類やサイズ等をCSSで調整することで
見た目を装飾させることができます。

そして実際のカウントアップアニメーション動作スクリプトは
以下の様になります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
	var countElm = $('.count'),
	countSpeed = 10;

	countElm.each(function(){
		var self = $(this),
		countMax = self.attr('data-num'),
		thisCount = self.text(),
		countTimer;

		function timer(){
			countTimer = setInterval(function(){
				var countNext = thisCount++;
				self.text(countNext);

				if(countNext == countMax){
					clearInterval(countTimer);
				}
			},countSpeed);
		}
		timer();
	});

});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

countElm = $(‘.count’) カウントアップ動作させる要素
countSpeed = 10 カウントアップするスピード

「countElm」が動作対象の要素の指定になり、
CSSクラスやIDまたはタグ自体を指定させることができます。

「countSpeed」は数値が一つ加算される際のスピードになり、
この値を小さくすればアニメーションは速くなり、大きくするとゆっくりになります。

スクリプト構成はタグで囲われた数値を取得して、
その値に「1」を足した値に書き換え続け、
「data-num」属性に指定された数値に到達した時点で
アニメーションをストップさせています。

画像を使わないシステムフォントで構成しているので
GoogleフォントなどのWebフォントを使用することで
簡単に飾り気のあるフォントでカウントアップの動作を実装させることも可能になります。

「GoogleFontパターン:jQueryで数字をカウントアップしながら表示する方法」サンプルを別枠で表示

以上が数字をカウントアップさせるアニメーションで表示する方法でした。

注目させたい数字や、ランキング発表をする際の演出など、
とても目を引くアニメーションをつけることができるかと思います。

jQueryで数字にカウントアップアニメーションをつける際に是非。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで数字をカウントアップしながら表示する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR