Number Count Up

DEMO

CODE

<div class="demo-stage"><div class="nc-grid"><div class="nc-item"><div class="nc-val" data-target="2847">0</div><div class="nc-label">USERS</div></div><div class="nc-item"><div class="nc-val" data-target="98">0</div><div class="nc-label">PERCENT</div></div><div class="nc-item"><div class="nc-val" data-target="156">0</div><div class="nc-label">PROJECTS</div></div></div><button class="nc-btn" onclick="startCount()">START COUNT</button></div>

.nc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding:2rem; }
.nc-item { text-align:center; }
.nc-val { font-family:'Oswald',sans-serif; font-size:3rem; font-weight:600; color:#E91B89; line-height:1; }
.nc-label { font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.2em; color:#5A5A5A; margin-top:.5rem; }
.nc-btn { display:block; margin:1rem auto; padding:.8rem 2rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; }

function startCount(){ document.querySelectorAll('.nc-val').forEach(el => { const target = +el.dataset.target; const duration = 1800; const start = performance.now(); function step(now){ const p = Math.min((now - start) / duration, 1); const eased = 1 - Math.pow(1 - p, 3); el.textContent = Math.floor(eased * target); if(p < 1) requestAnimationFrame(step); else el.textContent = target; } requestAnimationFrame(step); }); }

AI PROMPT

数値カウントアップを作って。data-target属性で目標値を指定、duration 1800msでeaseOutCubicイージング適用。requestAnimationFrameで毎フレーム計算、Math.floor()で整数化。スタートボタンクリックで全要素同時カウントアップ。フォントはOswaldで大きく、color:#E91B89。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。