[JS]数字をくるくる回転させて、指定した数字を表示させるスクリプト -odometer

数字をくるくる回転させて、指定した数字を表示させるスクリプトを紹介します。

サポートするブラウザはIE8+を含むモダンブラウザすべてで、古いブラウザでは自動的にフォールバックされ、非常にパフォーマンスの高いCSSアニメーションで表示されます。

デモのキャプチャ

odometer
odometer -GitHub

odometerのデモ

odometerではテーマが用意されており、さまざまなデザインで数字を表示できます。もちろん、シンプルなのも用意されています。

デモのキャプチャ

デモページ

デモのキャプチャ

デモページ: Default

デモのキャプチャ

デモページ: Car

テーマは全部で7種類、data属性で簡単に利用できます。

サイトのキャプチャ

テーマの一覧

odometerの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

Step 2: HTML

.odometerを付与した要素は、自動的にオドメーターになります。

スタイルを適用したい場合は、data属性を加えます。

Step 3: JavaScript

最終的に表示する数字をスクリプトで定義して、スクリプトを実行します。

sponsors

top of page

©2018 coliss