Odometer Counter

<!-- Odometer Counter · Bron: Frontend Masters · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="odr-wrap"><div class="odr-num" data-val="48205"></div><span class="odr-label">verwerkte claims</span></div>
</div>

/* Odometer Counter · Bron: Frontend Masters · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.odr-wrap{text-align:center;font-family:'Boldonse','Switzer',system-ui,sans-serif}
.odr-num{display:inline-flex;gap:2px;font-size:54px;font-weight:800;color:#0a0a0a;line-height:1}
.odr-digit{position:relative;width:.62em;height:1em;overflow:hidden}
.odr-track{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.odr-track span{height:1em;display:flex;align-items:center;justify-content:center}
.odr-label{display:block;margin-top:12px;font-family:'Switzer',system-ui,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#F5480F}

// Odometer Counter · Bron: Frontend Masters · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.odr-wrap')||root;var box=root.querySelector('.odr-num');var target=String(box.dataset.val);var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;box.innerHTML='';var tracks=[];target.split('').forEach(function(ch){var d=document.createElement('span');d.className='odr-digit';var t=document.createElement('span');t.className='odr-track';for(var i=0;i<=10;i++){var s=document.createElement('span');s.textContent=String(i%10);t.appendChild(s);}d.appendChild(t);box.appendChild(d);tracks.push({el:t,n:parseInt(ch,10)});});function run(){tracks.forEach(function(t,idx){var off=reduce?t.n:t.n+10;setTimeout(function(){t.el.style.transform='translateY(-'+off+'em)';},reduce?0:idx*90);});}if(reduce){run();return;}var io=new IntersectionObserver(function(e){if(e[0].isIntersecting){run();io.disconnect();}});io.observe(box);
}
init(document.querySelector('.jouw-container'));