← 動的パーツギャラリーへ戻る

パーツ番号 02-01-08 ・ JavaScript使用

数字カウントアップ

画面に入ると0から目標値までカウントアップ。実績数・会員数などの数字セクションで説得力を高めます。再表示で再カウント。

scrolljs

プレビュー

ソースコード

HTML

<div class="d02-01-08-box">
          <span class="d02-01-08-count" data-target="1250">0</span><span class="d02-01-08-unit">件</span>
          <p class="d02-01-08-label">累計サポート実績</p>
        </div>

CSS

.d02-01-08 .d02-01-08-box{ text-align:center; }
        .d02-01-08 .d02-01-08-count{
          font-size:52px;
          font-weight:800;
          color:#2563eb;
          font-variant-numeric:tabular-nums;
          letter-spacing:.02em;
        }
        .d02-01-08 .d02-01-08-unit{
          font-size:22px;
          font-weight:700;
          color:#1a2333;
          margin-left:4px;
        }
        .d02-01-08 .d02-01-08-label{
          margin-top:6px;
          font-size:13px;
          color:#64748b;
          letter-spacing:.12em;
        }

JavaScript

(function(){
        var el = document.querySelector('#item-02-01-08 .d02-01-08 .d02-01-08-count');
        if(!el || !('IntersectionObserver' in window)) return;
        var target = parseInt(el.getAttribute('data-target'), 10) || 0;
        var rafId = null;
        function animate(){
          var start = performance.now(), dur = 1400;
          function step(now){
            var p = Math.min((now - start) / dur, 1);
            var eased = 1 - Math.pow(1 - p, 3);
            el.textContent = Math.round(target * eased).toLocaleString('ja-JP');
            if(p < 1) rafId = requestAnimationFrame(step);
          }
          rafId = requestAnimationFrame(step);
        }
        var io = new IntersectionObserver(function(entries){
          entries.forEach(function(e){
            if(rafId) cancelAnimationFrame(rafId);
            if(e.isIntersecting){ animate(); }
            else{ el.textContent = '0'; }
          });
        }, { threshold: 0.25 });
        io.observe(el);
      })();

クラス名 .d02-01-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。