html-number-countup

HTML要素に対して、初めて画面に表示されたときに0からその数値までカウントアップするアニメーションを付与します。

Usage

JavaScriptモジュールのインポート

静的HTMLファイルでは、例えば以下のようにJavaScriptモジュールをインポートします。

<script type="module">
  import { init } from '@axt_ayakoto/html-number-countup';
  // ここにコードを記述
</script>

また、npmなどのパッケージマネージャーを使用している場合は、以下のようにインポートが可能です。

import { init } from '@axt_ayakoto/html-number-countup';

CSSのインポート

(現時点でCSSは特に必要ありません。)

簡易利用: クラス・data属性による使用

HTML要素に対して、以下のようにCSSクラス名とdata-html-number-countup属性を指定します。

<span class="html-number-countup" data-html-number-countup='{"duration":2000,"start":100,"end":1000,"separator":",","decimalDigits":2}'></span>

これにより、ページ読み込み時に自動的にカウントアップアニメーションが予約されます。

なお、data-html-number-countup属性には、以下のオプションをJSON形式で指定できます。

• duration: アニメーションの継続時間をミリ秒単位で指定します。
  • 省略可能で、デフォルトは1000(1秒)です。
• start: カウントアップを開始する数値を指定します。
  • 省略可能で、デフォルトは0です。
• end: カウントアップを終了する数値を指定します。
  • 省略はできません。
• separator: 数値を3桁ごとに区切るための文字列を指定します。
  • 省略可能で、デフォルトは""(区切りなし)です。
• decimalDigits: 小数点以下の桁数を指定します。
  • 省略可能で、デフォルトは0です。
  • 0のときは整数として、1以上のときはその桁数まで小数点以下を表示する形でカウントアップします。

カスタム利用: init()関数による使用

init()関数を使用して、任意のHTML要素に対してカウントアップアニメーションを予約することもできます。

import { init } from '@axt_ayakoto/html-number-countup';
const element = document.getElementById('countup-target');
init(element, { start: 0, end: 1000, duration: 2000, separator: ",", decimalDigits: 2 });

Notes

• どのようにスクロールしても画面全体に表示されることがない要素(大きさが画面サイズを超えている要素など)に対しては、カウントアップアニメーションは発動しません。
• アニメーションは一度だけ発動します。要素が画面外にスクロールアウトして再度スクロールインしても、再度アニメーションは発動しません。
• endオプションは必須です。指定しない場合、コンソールにエラーメッセージが表示され、アニメーションは発動しません。
• endオプションに数値以外の値を指定した場合、コンソールにエラーメッセージが表示され、アニメーションは発動しません。

Development

Build, Publish

package.jsonのバージョンを更新した後、以下のコマンドを実行してビルドおよび公開を行います。

npm run build
npm publish --access public

License

copyright (c) 2026- Ayasaka-Koto. This library is licensed under the MIT License.