パーツ番号 02-01-08 ・ JavaScript使用
数字カウントアップ
画面に入ると0から目標値までカウントアップ。実績数・会員数などの数字セクションで説得力を高めます。再表示で再カウント。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。