Posted: 2015.10.19 / Category: javascript / Tag: jQuery

指定した数値までカウントアニメーションしてくれるjQueryプラグイン「jquery-countTo」のご紹介をいたします。

jquery-countToのダウンロードと準備

ダウンロードはGitHubから。

lessthan3/jquery-countTo

JSファイルはbuildフォルダに入っています。jQueryと一緒に読み込みましょう。

html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-countTo.min.js"></script>
    

使い方

初期値はHTMLで設定します。

HTML

<span class="timer-a">0</span>
<span class="timer-b">0</span>
<span class="timer-c">5</span>
<span class="timer-d">10</span>

JSの指定は「countTo(目標値)」と指定するだけです。
オプションもいくつかあるので参考にしてください。

JavaScript

$(function() {
	// 320まで加算
	$(".timer-a").countTo(320);
	// durationで加算速度調節
	$(".timer-b").countTo(100, {"duration": 30});
	// decimalsで少数点指定
	$(".timer-c").countTo(30.5, {"decimals": 1});
	// max_stepsで切り替えの回数を指定
	$(".timer-d").countTo(20, {"max_steps": 5});
});