勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法

  JavaScript

だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメモしたが、もっと滑らかにカウントアップ及びダウンさせてほしいと要望を受けた(前の方法だとカクつく)。調べたところ「countUp.js」ライブラリだと滑らか且つ導入も簡単そう。以下に実装方法をメモ。

 

サンプル

https://taitan916.info/sample/countUp.js/

 

countUp.js

公式サイト

https://inorganik.github.io/countUp.js/

GitHub

https://github.com/inorganik/CountUp.js

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.5/countUp.umd.min.js"></script>

異なるバージョンを利用したい場合は以下から探す。

https://cdnjs.com/libraries/countup.js/2.0.5

 

実装方法

ソースコード

<main>
    <section>
        <b>1から10,000までカウントアップ</b>
        <div id="count_up"></div>
    </section><hr>
    <section>
        <b>10,000から1までカウントダウン</b>
        <div id="count_down"></div>
    </section>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.5/countUp.umd.min.js"></script>
<script>
//カウントアップ
const count_up_options = {
    duration: 1,
}
const count_up = new countUp.CountUp(`count_up`, 10000, count_up_options);
count_up.start();

//カウントダウン
const count_down_options = {
    startVal: 10000,
    duration: 1,
}
const count_down = new countUp.CountUp(`count_down`, 1, count_down_options);
count_down.start();
</script>

オプションについて

オプションについては公式ページで色々パラメータを編集し「Apply」ボタンをクリックするとソースコードが表示されるので、そちらをコピペすると良い。

 - JavaScript

  関連記事

JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)

JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...

バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法

あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法

サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...

JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法

JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...

ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法

CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...