Stat Counter Cards

<!-- Stat Counter Cards · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="scc"><div class="scc-card"><div class="scc-num" data-to="1280">0</div><div class="scc-lab">Gebruikers</div></div><div class="scc-card"><div class="scc-num" data-to="98" data-suf="%">0</div><div class="scc-lab">Uptime</div></div><div class="scc-card"><div class="scc-num" data-to="342">0</div><div class="scc-lab">Projecten</div></div></div>
</div>

/* Stat Counter Cards · NedDev · eigen werk. */
.scc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:360px;font-family:'Switzer',sans-serif}
.scc-card{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:14px;padding:16px 10px;text-align:center;transition:transform .25s,box-shadow .25s}
.scc-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px -16px rgba(10,10,10,.4)}
.scc-num{font-size:26px;font-weight:800;color:#0a0a0a;font-variant-numeric:tabular-nums}
.scc-lab{font-size:11px;font-weight:600;color:rgba(10,10,10,.5);margin-top:4px}

// Stat Counter Cards · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.scc')||root;var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var nums=[].slice.call(root.querySelectorAll('.scc-num'));function run(el){var to=+el.dataset.to,suf=el.dataset.suf||'';if(reduce){el.textContent=to+suf;return;}var t0=performance.now(),d=1100;(function tick(t){var p=Math.min((t-t0)/d,1),e=1-Math.pow(1-p,3);el.textContent=Math.round(to*e)+suf;if(p<1)requestAnimationFrame(tick);})(t0);}var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){run(en.target);io.unobserve(en.target);}});},{threshold:.4});nums.forEach(function(n){io.observe(n);});
}
init(document.querySelector('.jouw-container'));