【JavaScript】パラパラパラっと数字がカウントアップするアニメーションを実装するODOMETERの使い方
古い車の走行距離計やスロットマシーンのような動きで数字を表示するオドメーターの設置方法です。
1234
この記事の目次
設定方法
以下のコードをhead内に貼り付ける
階層は使用するサイトに合わせてください。
<link rel="stylesheet" href="odometer-theme-car.css" />
<script src="odometer.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
CSS
CSSはいくつかテーマが用意されていて、参照するCSSを変更するだけで簡単に見た目を変えられます。
もちろん自分で編集することも可能です。
CSSのテーマはこちらで確認できます。
jQuery
jQueryは解凍したデモファイルにも記載されているバージョンで良いのですが、2.xや3.xでも大丈夫です。
HTMLマークアップ
HTML
動かしたい数字の初期値とクラスを設定します。
用意されているCSSテーマを使用する場合はodometer
を使っておきましょう。
<p class="odometer">1234</p>
JavaScript
下記JavaScriptはheadよりfooterに入れましょう。
最終的に表示させたい数字をhtml()
の部分に入力します。
<script>
setTimeout(function(){
$('.odometer').html(2020);
}, 1000);
</script>
3桁区切りのカンマについて
デフォルトでは3桁ごとにカンマが入っていますが、
下記のコードを入れるとカンマが無くなります。
<script>
window.odometerOptions = {
format: '(ddd).dd'
};
</script>