Ticker met variabele snelheid Nieuw

<!-- Ticker met variabele snelheid · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vtk"><div class="vtk__row vtk__row--a" data-dir="-1"><div class="vtk__in"><span>Dakkapel in 1 dag geplaatst</span><i></i><span>4,8 uit 5 op 312 reviews</span><i></i><span>Gratis opname in regio Utrecht</span><i></i><span>10 jaar garantie op constructie</span><i></i></div></div>
<div class="vtk__row vtk__row--b" data-dir="1"><div class="vtk__in"><span>VCA gecertificeerd</span><b>/</b><span>Bouwgarant</span><b>/</b><span>1.200+ projecten</span><b>/</b><span>Sinds 1987</span><b>/</b><span>Eigen timmerfabriek</span><b>/</b></div></div>
<div class="vtk__hud"><span>Hover vertraagt · sleep om te gooien</span><span class="vtk__v"><em>1.0x</em><span class="vtk__bar"><span></span></span></span></div></div>
</div>

/* Ticker met variabele snelheid · NedDev · eigen werk. */
.vtk{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden;container-type:inline-size;user-select:none;-webkit-user-select:none}
.vtk__row{overflow:hidden;cursor:grab;touch-action:pan-y}
.vtk__row.is-drag{cursor:grabbing}
.vtk__in{display:flex;width:max-content;will-change:transform}
.vtk__row--a{background:#0a0a0a;color:#fff;padding:12px 0}
.vtk__row--a span{font:700 clamp(18px,6cqw,26px)/1 'Switzer',sans-serif;letter-spacing:-.03em;white-space:nowrap;padding:0 16px}
.vtk__row--a i{align-self:center;width:9px;height:9px;background:#F5480F;border-radius:50%;flex:none}
.vtk__row--b{background:#F5480F;color:#0a0a0a;padding:8px 0}
.vtk__row--b span{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:0 12px}
.vtk__row--b b{font:500 11px 'JetBrains Mono',monospace;opacity:.5}
.vtk__hud{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 14px 0;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.06em;color:#6b6762}
.vtk__v{display:flex;align-items:center;gap:6px}.vtk__v em{font-style:normal;color:#0a0a0a;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.vtk__bar{width:54px;height:3px;background:#dcd8d2;border-radius:3px;overflow:hidden}.vtk__bar span{display:block;height:100%;width:20%;background:#F5480F}
@container (max-width:380px){.vtk__hud>span:first-child{max-width:60%}}

// Ticker met variabele snelheid · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.vtk')||root;
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
var em=root.querySelector('.vtk__v em'),bar=root.querySelector('.vtk__bar span');
var rows=[].slice.call(root.querySelectorAll('.vtk__row')).map(function(r){var inn=r.querySelector('.vtk__in');inn.innerHTML+=inn.innerHTML;[].slice.call(inn.children).slice(inn.children.length/2).forEach(function(c){c.setAttribute('aria-hidden','true');});return{r:r,inn:inn,dir:+r.getAttribute('data-dir'),x:0,w:0};});
var BASE=rm?0:.55,v=BASE,target=BASE,drag=null,last=0;
function measure(){rows.forEach(function(o){o.w=o.inn.scrollWidth/2;});}
measure();window.addEventListener('resize',measure);
rows.forEach(function(o){o.r.addEventListener('pointerenter',function(){target=rm?0:.08;});o.r.addEventListener('pointerleave',function(){target=BASE;});
o.r.addEventListener('pointerdown',function(e){drag={x:e.clientX,t:performance.now(),vel:0};o.r.classList.add('is-drag');o.r.setPointerCapture(e.pointerId);});
o.r.addEventListener('pointermove',function(e){if(!drag)return;var now=performance.now(),dx=e.clientX-drag.x,dt=Math.max(1,now-drag.t);drag.vel=dx/dt*16;drag.x=e.clientX;drag.t=now;rows.forEach(function(q){q.x+=dx*(q===o?1:.6)*q.dir*o.dir;});v=0;});
o.r.addEventListener('pointerup',function(){if(drag){v=Math.max(-14,Math.min(14,-drag.vel*o.dir));}drag=null;o.r.classList.remove('is-drag');});
o.r.addEventListener('pointercancel',function(){drag=null;o.r.classList.remove('is-drag');});
o.r.addEventListener('wheel',function(e){if(Math.abs(e.deltaX)>Math.abs(e.deltaY)){v+=e.deltaX*.02;}},{passive:true});});
function frame(){if(!drag){v+=(target-v)*.035;}rows.forEach(function(o){o.x+=v*o.dir*(o.dir>0?.7:1);if(o.w){o.x=((o.x%o.w)+o.w)%o.w;}o.inn.style.transform='translate3d('+(-o.x).toFixed(2)+'px,0,0)';});
var s=BASE?Math.abs(v)/BASE:0;em.textContent=s.toFixed(1)+'x';bar.style.width=Math.min(100,s*20)+'%';requestAnimationFrame(frame);}
requestAnimationFrame(frame);
}
init(document.querySelector('.jouw-container'));