Statistiek-band

<!-- Statistiek-band · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="stb">
  <div class="stb__inner">
    <span class="stb__eyebrow">/ in cijfers</span>
    <div class="stb__grid">
      <div class="stb__item"><span class="stb__v" data-to="40" data-suf="+">0</span><span class="stb__l">Live projecten</span></div>
      <div class="stb__item"><span class="stb__v" data-to="12" data-suf="">0</span><span class="stb__l">Jaar ervaring (team)</span></div>
      <div class="stb__item"><span class="stb__v" data-to="99.9" data-suf="%" data-dec="1">0</span><span class="stb__l">Uptime gemiddeld</span></div>
      <div class="stb__item"><span class="stb__v" data-to="3" data-suf="" data-pre="< ">0</span><span class="stb__l">Werkdagen tot eerste design</span></div>
    </div>
  </div>
</section>
</div>

/* Statistiek-band · NedDev · eigen werk. */
.stb{width:100%;box-sizing:border-box;background:#f4f3f1;color:#0a0a0a;border-top:1px solid rgba(10,10,10,.12);border-bottom:1px solid rgba(10,10,10,.12);display:flex;align-items:center}
.stb__inner{max-width:900px;margin:0 auto;padding:50px 28px;width:100%;box-sizing:border-box}
.stb__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#F5480F;display:block;margin-bottom:30px}
.stb__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(10,10,10,.12)}
.stb__item{background:#f4f3f1;padding:8px 18px 8px 0;display:flex;flex-direction:column}
.stb__item:not(:first-child){padding-left:24px}
.stb__v{font-family:'Boldonse',sans-serif;font-weight:400;font-size:clamp(38px,6vw,68px);line-height:.9;letter-spacing:-.03em}
.stb__l{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:#777;margin-top:12px;max-width:18ch}
@media(max-width:680px){.stb__grid{grid-template-columns:1fr 1fr;gap:1px}.stb__item{padding:16px}}

// Statistiek-band · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.stb')||root;
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var vs=[].slice.call(root.querySelectorAll('.stb__v'));
function setv(el,n){var d=+el.dataset.dec||0;el.textContent=(el.dataset.pre||'')+n.toFixed(d)+(el.dataset.suf||'');}
function run(){vs.forEach(function(el){var to=+el.dataset.to;if(reduce){setv(el,to);return;}var t0=null;function s(ts){if(!t0)t0=ts;var p=Math.min((ts-t0)/1200,1);setv(el,(1-Math.pow(1-p,3))*to);if(p<1)requestAnimationFrame(s);}requestAnimationFrame(s);});}
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){run();io.disconnect();}});},{threshold:.4});io.observe(root);
}
init(document.querySelector('.jouw-container'));