1.

Odometer

編集

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

 

編集
Post Share
子ページ

子ページはありません

同階層のページ

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

2018-09-21 09:23:01 guest 798

人気ページ

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