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

コンボ・連続達成カウンター

クリックのたびに「COMBO ×3」のような数字が弾みながら増えていきます。学習サイトの連続正解や連続クリアの演出に使えます。

clickjs

プレビュー

ソースコード

HTML

<div class="d09-06-05-box">
          <div class="d09-06-05-count"><span class="d09-06-05-num">×0</span><span class="d09-06-05-label">COMBO</span></div>
          <button type="button" class="d09-06-05-btn">クリックしてコンボ!</button>
        </div>

CSS

.d09-06-05-box{display:flex;flex-direction:column;align-items:center}
        .d09-06-05-count{display:flex;flex-direction:column;align-items:center;margin-bottom:16px}
        .d09-06-05-num{font-size:40px;font-weight:900;color:#ef4444;line-height:1;
          transform:scale(1);transition:transform .15s cubic-bezier(.3,1.8,.4,1)}
        .d09-06-05-num.is-pop{transform:scale(1.35)}
        .d09-06-05-label{font-size:11px;letter-spacing:.2em;color:#94a3b8;font-weight:700;margin-top:4px}
        .d09-06-05-btn{border:none;border-radius:999px;padding:10px 22px;background:#ef4444;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}

JavaScript

(function(){
        var root=document.getElementById('item-09-06-05');
        if(!root)return;
        var numEl=root.querySelector('.d09-06-05-num');
        var btn=root.querySelector('.d09-06-05-btn');
        var n=0,resetT;
        btn.addEventListener('click',function(){
          n++;
          numEl.textContent='×'+n;
          numEl.classList.remove('is-pop');
          void numEl.offsetWidth;
          numEl.classList.add('is-pop');
          numEl.style.filter='hue-rotate('+(n*24)+'deg)';
          clearTimeout(resetT);
          resetT=setTimeout(function(){n=0;numEl.textContent='×0';numEl.style.filter='none';},2500);
        });
      })();

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