Marquee gestuurd door scroll

<!-- Marquee gestuurd door scroll · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-smq"><div class="ei-smq__row"><div class="ei-smq__tr">Webdesign · Webshops · Vindbaarheid · Onderhoud · </div></div><div class="ei-smq__row ei-smq__row--b"><div class="ei-smq__tr">Den Haag · Rotterdam · Leiden · Delft · Zoetermeer · </div></div><span class="ei-smq__k">scroll de pagina</span></div>
</div>

/* Marquee gestuurd door scroll · NedDev · eigen werk. */
.ei-smq{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden;background:#f4f3f1}
.ei-smq__row{display:flex;white-space:nowrap;overflow:hidden}
.ei-smq__tr{flex:none;font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(26px,5vw,40px);line-height:1.5;color:#0a0a0a;padding-right:.3em;will-change:transform}
.ei-smq__row--b .ei-smq__tr{color:transparent;-webkit-text-stroke:1.2px #F5480F}
.ei-smq__k{position:absolute;bottom:12px;left:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.45)}

// Marquee gestuurd door scroll · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-smq'),rows=[].slice.call(w.querySelectorAll('.ei-smq__row'));
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var lines=rows.map(function(r,i){var t=r.querySelector('.ei-smq__tr');for(var k=0;k<3;k++){var c=t.cloneNode(true);c.setAttribute('aria-hidden','true');r.appendChild(c);}return {row:r,dir:i?1:-1,x:0};});
var dirSign=1,boost=0,lastY=window.scrollY,visible=true;
if(window.IntersectionObserver)new IntersectionObserver(function(es){visible=es[0].isIntersecting;}).observe(w);
window.addEventListener('scroll',function(){var y=window.scrollY,dy=y-lastY;lastY=y;if(dy!==0)dirSign=dy>0?1:-1;boost=Math.min(28,boost+Math.abs(dy)*.25);},{passive:true});
function tick(){if(!w.isConnected)return;if(visible&&!reduce){var v=(.6+boost)*dirSign;boost*=.92;
  lines.forEach(function(l){var unit=l.row.firstElementChild.offsetWidth||1;l.x+=v*l.dir;if(l.x<=-unit)l.x+=unit;if(l.x>0)l.x-=unit;[].forEach.call(l.row.children,function(c){c.style.transform='translateX('+l.x.toFixed(2)+'px)';});});}
  requestAnimationFrame(tick);}
lines[1].x=-200;requestAnimationFrame(tick);
}
init(document.querySelector('.jouw-container'));