パーツ番号 09-05-11 ・ JavaScript使用

実績数値カウントアップ表示

画面内に入ると0から実際の数値まで数字がカウントアップします。導入実績や累計販売数などのインパクトのある数字を印象づけたいLPの実績セクションに使えます。

scrolljs

プレビュー

ソースコード

HTML

<div class="d09-05-11-widget">
          <span class="d09-05-11-num">0</span><span class="d09-05-11-suffix">社+</span>
          <p class="d09-05-11-label">導入企業数(累計)</p>
        </div>

CSS

.d09-05-11-widget{ text-align:center; }
        .d09-05-11-num{ font-size:34px; font-weight:800; color:#1f2937; font-variant-numeric:tabular-nums; }
        .d09-05-11-suffix{ font-size:16px; font-weight:700; color:#4f46e5; margin-left:2px; }
        .d09-05-11-label{ margin:8px 0 0; font-size:12px; color:#8a8a8a; }

JavaScript

(function(){
        var widget=document.querySelector('.d09-05-11-widget');
        if(!widget)return;
        var numEl=widget.querySelector('.d09-05-11-num');
        var target=2400;
        var done=false;
        function animate(){
          if(done)return;
          done=true;
          var duration=1200;
          var startTime=null;
          function step(ts){
            if(!startTime)startTime=ts;
            var progress=Math.min((ts-startTime)/duration,1);
            numEl.textContent=Math.round(target*progress).toLocaleString();
            if(progress<1)requestAnimationFrame(step);
          }
          requestAnimationFrame(step);
        }
        if('IntersectionObserver' in window){
          var io=new IntersectionObserver(function(entries){
            entries.forEach(function(e){
              if(e.isIntersecting)animate();
            });
          },{threshold:0.4});
          io.observe(widget);
        }else{
          animate();
        }
      })();

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