1.

Odometer

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

本稿は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の使い方説明は終了となります。

 

子ページ
子ページはありません
同階層のページ
同階層のページはありません

人気ページ

最近更新/作成されたページ

最近コメントのあったページ

最近の質問

コメント一覧

コメントがありません

ログインしなければコメント投稿はできません。