この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:T
更新日時:2018-09-20 20:32:34

タイトル: Odometera

本稿はCSSライブラリである「Odometer」に関する記事です。

 

Odometerとは？

Odometerとは数字や文字を回転させるアニメーションを提供するライブラリです。

様々なCSSテーマを提供しています。

 

ダウンロード

公式サイトのGithubリンクからダウンロードして下さい。

 

CSSとJavascriptの設置

ダウンロードしたファイル郡の中から使用するファイルはCSS(テーマ)とJavascript(odometer.js)のみです。

プロジェクト内の適当な場所に配置して、以下を参考に<head>タグ内に実装します。

今回の実装例では「odometer-theme-train-station.css」テーマを使用します。

また、jQueryが必要なのでjQueryも読み込みます。（jQueryに関してはこちら）

<link href="odometer-theme-car.css" rel="stylesheet" />
<script src="odometer.js"></script>

 

数値の記載

実際に回転させる数値を記載します。

<script>
$(document).ready(function() {
setTimeout(function(){
$('.odometer').html(999);
}, 1000);
});
</script>

<div class="odometer">200</div>

<div>タグ内の数値は開始値、JSのhtml()の引数には終了値を記載します。

 

以上でodometerの使い方説明は終了となります。