jquery.animateNumberは、指定した数まで数字の部分をアニメーションでカウントアップさせることができるjQueryプラグインです。
動きについては、jquery.animateNumberの配布ページをご参照ください。様々なオプションの紹介とともに、それぞれの動作デモを確認することができます。
スポンサードリンク
jquery.animateNumberの使い方
まずは、jquery.animateNumberの配布ページからファイルをダウンロードします。
ダウンロードしたファイルを解凍し、jquery.animateNumber.min.jsをサーバーにアップします。
そのうえで、HTMLファイル内にカウントアップする数字を表示させたい部分とスクリプトを記述します。
<p>ここの値が増えるよ→ <span id="lines">0</span> ←ここの値が増えるよ</p>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.animateNumber.min.js"></script>
<script>
$('#lines').animateNumber({ number: 1000 });
</script>
linesというIDが指定されている箇所がカウントアップします。
「$(‘#lines’).animateNumber({ number: 1000 });」の”lines”がIDの指定、”number: 1000″がカウントアップする数の指定です。上記の例だと、0～1000まで数字が増えていきます。
上記は非常にシンプルな例ですが、色んなオプションも用意されているので、詳しくはjquery.animateNumberの配布ページをご参照ください。
あとがき
うまく使えば色んなところで活用できそうです。カウントアップする数字のアニメーションを設置したいときはぜひ！