サイトをみてると数字がカウントアップして表示されてるのを見たことありませんか？
保険の見積もりや、ECサイトでの合計金額、不動産での物件数、サイトでのPV数にポートフォリオサイトでのスキルを数値化したもの・・・今回は簡単にカウントアップできるプラグイン「animateNumber」を紹介したいと思います。
ちなみにカウントダウンや計算はできるか試していないのでわかりません！

まずはデモをご覧ください。

jQueryプラグイン「AnimateNumber」デモ

• Demo

ページを開いた直後、カウントアップが始まります。

「jquery.animateNumber」のダウンロード

「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。
ここで使用する「jquery.animateNumber」のバージョンは0.0.12です。下記サイトから「jquery.animateNumber.min.js」をダウンロードし、使用します。

• jQuery
• jquery.animateNumber

カウントアップ方法

使用方法はかなりシンプルです！
まずはデモのHTML記述を見ると下記のような記述があるかと思います。

<div class="card">
　　<section class="section">
　　　　<div id="fukuoka" class="img">
　　　　　　<h3>FUKUOKA</h3>
　　　　　　<p><i class="icon icon-cloud"></i><span class="counter">24</span>°</p>
　　　　　　<ul>
　　　　　　　　<li class="min">-40°</li>
　　　　　　　　<li class="zero">0°</li>
　　　　　　　　<li class="max">40°</li>
　　　　　　</ul>
・・・
　　</section>
</div>

5行目の「class=”counter”」が今回カウントアップする箇所です。
HTMLには、このようにclassやidの付与をしておきます。以下jQueryです。

$('#fukuoka .counter').animateNumber({ number: 24}, 900);

たったこれだけ！非常にシンプルです。
「number:24」というのは「#fukuoka .counterが24にカウントアップする」ということです。ここの数値をかえてあげるとその数値までカウントアップします。
その後の「900」は「0.9秒かけてカウントアップします」という意味です。

オプション

上記で説明したものを含めて、ほかに使用できるオプションも改めてまとめて説明します。といってもオプション少ないです。

var percent_number_step = $.animateNumber.numberStepFactories.append(' %')
$('#fukuoka .counter').animateNumber(
	{
		number: 24,
		'font-size': '30px',
		numberStep: percent_number_step,
		color: 'green',
		easing: 'easeInQuad'
	},
	900
);

4行目「number」

数値を入れます。設定した数値までカウントアップします。

5行目「’font-size’」

ほかのものとは別に「’」がある点に注意してください。
現在設定されているフォントサイズから、指定したフォントサイズへ変化します。

6行目「numberStep」

「number」がどのように変化していくのかを主に関数で設定します。

7行目「color」

このオプションを使用するには「jQuery Color」というプラグインが別途必要です。
現在設定されているフォントカラーから指定されたフォントカラーへと変化します。

7行目「easing」

このオプションを使用するには「jQuery Easing」というプラグインが別途必要です。
カウントアップ中の数値の加速・減速タイミングを調整できます。

以上です。

前に紹介した「Waypoints」と組み合わせて使うと好きなタイミングでカウントアップできるので、より使いやすくなるかと思います。
数字であれば、どんなとこにも使えそうなので是非使ってみてください！

• ツイート
•