数値のカウントアップを実装するプラグイン「Counter-Up」を紹介します。
jQueryプラグイン「Counter-Up」
このプラグインを使えば、整数(1234)はもちろんのこと小数点(123.456)やカンマ区切り(123,456)などのさまざまな数値フォーマットに対応したカウントアップ・アニメーションを実装することができます。
オプションでは、カウントアップ開始までの時間やカウントアップに要する時間を指定することができます。
それではデモページのカウントアップをご覧ください。
「Counter-Up」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "Counter-Up のデモでーす。" > |
< title >Counter-Up - jQuery Plugin - Demo</ title > |
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></ script > |
< script src = "http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js" ></ script > |
< script src = "jquery.counterup.min.js" ></ script > |
jQuery(document).ready(function($){ |
< p class = "demo" >12345</ p > |
< p class = "demo" >12345.6789</ p > |
< p class = "demo" >987,654</ p > |
< footer style = "margin-top:20px" > |
< a href = "https://webkaru.net/jquery-plugin/counter-up/" >「jQueryプラグインまとめ」に戻る</ a > |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。