[JS]数字をくるくる回転させて、指定した数字を表示させるスクリプト -odometer
Post on:2018年6月25日
sponsors
数字をくるくる回転させて、指定した数字を表示させるスクリプトを紹介します。
サポートするブラウザはIE8+を含むモダンブラウザすべてで、古いブラウザでは自動的にフォールバックされ、非常にパフォーマンスの高いCSSアニメーションで表示されます。
odometerのデモ
odometerではテーマが用意されており、さまざまなデザインで数字を表示できます。もちろん、シンプルなのも用意されています。
テーマは全部で7種類、data属性で簡単に利用できます。
odometerの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルとして記述します。
|
1 2 3 4 |
<head> <link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script> </head> |
Step 2: HTML
.odometerを付与した要素は、自動的にオドメーターになります。
|
1 |
<div class="odometer"></div> |
スタイルを適用したい場合は、data属性を加えます。
|
1 |
<div class="odometer" data-theme="default"><div> |
Step 3: JavaScript
最終的に表示する数字をスクリプトで定義して、スクリプトを実行します。
|
1 2 |
element.innerHTML = 123 // ネイティブの場合 $('.odometer').html(123) // jqueryの場合 |
sponsors
