カウントアップ

基本的な使い方

カウントアップ機能は、スクロールトリガーと連動して数値をアニメーションします。

HTML設定

.js-countupクラスを持つ要素で数値アニメーションを実行します。

<span class="js-countup" data-config="[to:100]">0</span>％

JavaScript設定

main.tsで以下のように初期化します。

countup('.js-countup', {
  duration: 2, // default 1
  start: 'top 90%', // default 'top 70%'
});

デモ

カウントアップ

0から500まで1秒でカウントアップします。

0％

<data value="1000"><span class="js-countup" data-config="[to:1000]">0</span>％</data>

カウントダウン

500から1まで1秒でカウントダウンします。

500位

<data value="1"><span class="js-countup" data-config="[to:1]">500</span>位</data>

特殊な数字

カンマ

0から2000まで1秒でカウントアップし、コンマ区切りで表示されます。

<data value="2000"><span class="js-countup" data-config="[to:2,000]">0</span></data>

小数点

0から55.5まで1秒でカウントアップし、小数点以下も正確に表示されます。

<data value="0.5"><span class="js-countup" data-config="[to:7777.77]">0</span></data>

マイナス

0から-100まで1秒でカウントダウンし、負の数値も正確に表示されます。

100

<data value="-100"><span class="js-countup" data-config="[to:-100]">100</span></data>

設定オプション

data-config属性

data-config属性でアニメーションの詳細設定を行います。複数のオプションを組み合わせることができます。

オプション	概要	例
to	カウント終了値を指定します。（必須）	`[to:100]`
duration	アニメーション時間を秒で指定します。（省略可）	`[duration:2]`
start	スクロールトリガーの開始位置を指定します。（省略可）	`[start:top 70%]`
ease	アニメーションのイージングを指定します。（省略可）	`[ease:power2.out]`
toggleActions	スクロールトリガーのアクションを指定します。（省略可）	`[toggleActions:play pause resume reverse]`
markers	デバッグ用のマーカーを表示します。（省略可）	`[markers]`

to（必須）

型： number

カウントアニメーションの終了値を指定します。現在のテキスト値から指定した値までアニメーションします。

0（カウントアップ）

500（カウントダウン）

<div class="u-flex u-gap-md u-text-center u-justify-center">
<!-- でカウントアップ -->
<p><span class="js-countup" data-config="[to:100]">0</span><br aria-hidden="true">（カウントアップ）</p>
<!-- カウントダウン -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:1]">500</span><br aria-hidden="true">（カウントダウン）</p>
</div>

duration

型： number

デフォルト： main.tsの設定値または1秒

アニメーションの実行時間を秒単位で指定します。小数点も使用できます。

0（3秒）

0（10秒）

<div class="u-flex u-gap-md u-text-center u-justify-center">
<!-- 3秒でカウントアップ -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][duration:3]">0</span><br aria-hidden="true">（3秒）</p>
<!-- 10秒でカウントアップ -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][duration:10]">0</span><br aria-hidden="true">（10秒）</p>
</div>

start

型： string

デフォルト： main.tsの設定値または'top 70%'

スクロールトリガーの開始位置を指定します。要素がビューポートのどの位置に来たときにアニメーションを開始するかを設定できます。

0（70%）

0（50%）

0（下端）

<div class="u-flex u-gap-md u-text-center u-justify-center">
<!-- ビューポートの70%位置でトリガー -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][start:top 70%]">0</span><br aria-hidden="true">（70%）</p>
<!-- ビューポートの50%位置でトリガー -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][start:top 50%]">0</span><br aria-hidden="true">（50%）</p>
<!-- ビューポートの下端でトリガー -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][start:bottom bottom]">0</span><br aria-hidden="true">（下端）</p>
</div>

ease

型： string

デフォルト： main.tsの設定値または'none'

アニメーションのイージング（緩急）を指定します。GSAPのイージング値を使用できます。（参考： GSAP Easing ）

0（none）

0（power2.out）

0（bounce）

<div class="u-flex u-gap-md u-text-center u-justify-center">
<!-- リニア（等速） -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][duration:5]">0</span><br aria-hidden="true">（none）</p>
<!-- スムーズな開始 -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][ease:power2.out][duration:5]">0</span><br aria-hidden="true">（power2.out）</p>
<!-- バウンス効果 -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][ease:bounce.out][duration:5]">0</span><br aria-hidden="true">（bounce）</p>
</div>

toggleActions

型： string

デフォルト： main.tsの設定値または'play none none none'

スクロールトリガーでの動作を制御します。4つの値を空白区切りで指定：[onEnter] [onLeave] [onEnterBack] [onLeaveBack]

設定可能な値：play, pause, resume, reverse, restart, complete, reset, none

0（一度のみ）

0（下方向通過リスタート）

0（前後方向通過リスタート）

<div class="u-flex u-gap-md u-text-center u-justify-center">
<!-- 一度だけ実行（デフォルト） -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][toggleActions:play none none none]">0</span><br aria-hidden="true">（一度のみ）</p>
<!-- スクロールで前後に動作 -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][toggleActions:play pause resume reverse]">0</span><br aria-hidden="true">（下方向通過リスタート）</p>
<!-- 毎回リスタート -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][toggleActions:restart none restart none]">0</span><br aria-hidden="true">（前後方向通過リスタート）</p>
</div>

markers

型： boolean

デフォルト： main.tsの設定値またはfalse

開発時のデバッグ用マーカーを表示します。スクロールトリガーの動作位置を視覚的に確認できます。公開時には必ず消すようにしてください。

0（マーカー表示）

<div class="u-flex u-gap-md u-text-center u-justify-center">
<!-- マーカーを表示 -->
<p class="u-mt-0"><span class="js-countup" data-config="[to:100][markers]">0</span>（マーカー表示）</p>
</div>

JavaScript初期設定

main.tsで設定できるデフォルトオプションです。HTML属性の設定が優先されます。

オプション	型	デフォルト	概要
duration	`number`	`1`	アニメーション時間（秒）
start	`string`	`'top 70%'`	スクロールトリガーの開始位置
ease	`string`	`'none'`	アニメーションのイージング
toggleActions	`string`	`'play none none none'`	スクロールトリガーのアクション
markers	`boolean`	`false`	デバッグ用マーカーの表示

countup('.js-countup', {
  duration: 2,
  start: 'top 70%',
  ease: 'power2.out',
  toggleActions: 'play none none none',
  markers: false
});

注意事項

GSAP（GreenSock Animation Platform）ライブラリが必要です。
要素のテキストから数値部分を自動抽出し、開始値として使用します。
HTML属性の設定はJavaScript初期設定より優先されます。