【jQuery】スロットアニメーション後にテキストを表示する「odometer.js」

: ひぐま

2023.01.30

JavaScript

こんにちは、ひぐまです。
今回はウェブサイトで度々目にする、スロットアニメーション後にテキストを表示する動きを、「odometer.js」というプラグインを使って実装してみましたのでそのご紹介です。

公式サイト

公式サイトはこちらです。
https://github.hubspot.com/odometer/docs/welcome/

今回実装してみたデモはこちら。
デモ

電脳職人村創業の1999年から現在のまでの流れを数字のアニメーションで表現しました
...というような用途で実装ができるので、早速やっていきましょう

ファイルをダウンロードする

今回の実装に必要なファイルをダウンロードします。

①jQuery
今回はこれがないと動作しません。 https://jquery.com/
もしダウンロードしていない場合は上記からダウンロードします。
私は「jquery-1.12.4.min.js」を使用しています。
②odometer.js
③odometer-theme-default.css
CSSは実装したい形を選びダウンロードします。
今回は特に装飾を必要としないのでodometer-theme-default.cssを使用していますが、公式サイトを下にスクロールしていくといろいろなタイプのデモが置いてあるので気に入ったものがあれば該当のCSSファイルを用意しましょう。
【テーマはこちら】
https://github.hubspot.com/odometer/api/themes/

【ダウンロード方法】

https://github.hubspot.com/odometer/docs/welcome/

公式サイトに入り、[★ON　GITHUB]ボタンからダウンロードページへ移動します。 緑色の[Code]からメニュー内一番下の[Download ZIP]をクリックします。

ファイルが落とせたら、右クリックで[解凍]もしくは[すべて展開]を選びます。
中から[odometer.js]ファイル、themesフォルダ内から実装したいテーマのCSSを選び、HTMLソースのhead内に記述します。

<!-- テーマのCSS -->
<link rel="stylesheet" href="css/odometer/odometer-theme-default.css">
<!-- JS -->
<script src="../common/js/jquery-1.12.4.min.js"></script>
<script src="js/odometer/odometer.js"></script>

パスはご自身のフォルダーの階層に合わせて変更してください。

HTML

今回使用するHTMLはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
(中略)
    <link rel="stylesheet" href="css/odometer/odometer-theme-default.css">
    <script src="../common/js/jquery-1.12.4.min.js"></script>
    <script src="js/odometer/odometer.js"></script>
</head>
<body>
(中略)
    <main>
        <section>
            <p><span class="odometer" id="odometer">1999</span>年</p>
        </section>
    </main>
(中略)
</body>
</html>

アニメーションを行いたい箇所をpタグ等で囲みます。
今回は年表示を別で付けたいのでpの中へspanで囲んでいます。

囲んだタグに"odometer"クラスを指定します。
CSSを上書きしやすいのでidもつけていますが両方指定しなくても大丈夫です。
※CSSは装飾程度しかしていないので今回は省略します。

スクリプト

 <script>
    //HTMLがすべて読み込まれてから実行する
    $(window).load(function () {
        setTimeout(function(){
            $('.odometer').html(2023);
        }, 1000);
    });
    //オプション
    window.odometerOptions = {
        format: 'd'
    };
 </script>

$('～')には同じようにクラス(.odometer)を指定し、html()内へは変化後の数値を指定します。

1000の数値がはいっている箇所はアニメーション開始までのスピードになります。

また、デフォルトの場合2,023のようにカンマがつくのでオプションでそれを取っています。
ほかの形式は下記を参考にしてください。