印象的なカウントアップを行えるjQueryプラグイン「Odometer」

印象的なカウントアップを行えるjQueryプラグイン「Odometer」サンプル
実績の数値を出すときなどに、動きがあるととても印象的でインパクトがあります。
jQueryプラグインのodometerを利用すると簡単かつ華麗で印象的なカウントアップを表現できます。

使用方法 odometerからファイル一式をダウンロード。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="odometer-theme-slot-machine.css" />
<! 表示させたいテーマにあわせてCSSファイルを変更してください。 -->
<script type="text/javascript" src="odometer.js"></script>
<script>
$(document).ready(function() {
setTimeout(function(){
$('.odometer').html(1223); //数字は最後の数値
}, 1000);
});
</script>

あとは表示させたい場所に上記のclassをふれば完成です。
<div class="odometer" style="font-size:120px;">最初の数字</div>
表示サイズはCSSで調整可能です。

印象的なカウントアップを行えるjQueryプラグイン「Odometer」サンプル

sponsors

「印象的なカウントアップを行えるjQueryプラグイン「Odometer」」をシェアする

記事作成:
記事URL:

TOP > > > 印象的なカウントアップを行えるjQueryプラグイン「Odometer」