Optellende cijfers

<!-- Optellende cijfers · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-cnt"><div class="ei-cnt__i"><b data-to="1284">0</b><span>opgeleverde keukens</span></div><div class="ei-cnt__i"><b data-to="98" data-suf="%">0</b><span>beveelt ons aan</span></div><div class="ei-cnt__i"><b data-to="2.4" data-dec="1" data-pre="€ " data-suf=" mln">0</b><span>omzet 2025</span></div></div>
</div>

/* Optellende cijfers · NedDev · eigen werk. */
.ei-cnt{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:88%;border-top:1px solid #0a0a0a}
.ei-cnt__i{padding:16px 10px 0 0;display:flex;flex-direction:column;gap:6px}
.ei-cnt__i+.ei-cnt__i{padding-left:12px;border-left:1px solid rgba(10,10,10,.15)}
.ei-cnt__i b{font-family:'Switzer',sans-serif;font-weight:800;font-size:clamp(22px,4vw,32px);letter-spacing:-.03em;color:#0a0a0a;font-variant-numeric:tabular-nums;white-space:nowrap}
.ei-cnt__i:first-child b{color:#F5480F}
.ei-cnt__i span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(10,10,10,.55);line-height:1.4}

// Optellende cijfers · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-cnt'),els=[].slice.call(w.querySelectorAll('b[data-to]'));
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function fmt(el,v){var d=+(el.dataset.dec||0);return (el.dataset.pre||'')+v.toLocaleString('nl-NL',{minimumFractionDigits:d,maximumFractionDigits:d})+(el.dataset.suf||'');}
function run(){var t0=performance.now(),dur=1800;
  (function tick(now){var p=Math.min(1,(now-t0)/dur),e=p===1?1:1-Math.pow(2,-10*p);
    els.forEach(function(el){var to=+el.dataset.to,d=+(el.dataset.dec||0);var v=to*e;v=d?Math.round(v*Math.pow(10,d))/Math.pow(10,d):Math.round(v);el.textContent=fmt(el,v);});
    if(p<1)requestAnimationFrame(tick);})(t0);}
els.forEach(function(el){el.textContent=fmt(el,reduce?+el.dataset.to:0);});
if(!reduce){var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){run();io.disconnect();}},{threshold:.5});io.observe(w);}
}
init(document.querySelector('.jouw-container'));