Kinetische typografie op scroll Nieuw

<!-- Kinetische typografie op scroll · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kst"><div class="kst__sc" tabindex="0" aria-label="Scrollbaar vlak met tekst"><div class="kst__track"><div class="kst__pin">
<p class="kst__l kst__l1" aria-hidden="true">VAN KELDER · VAN KELDER · VAN KELDER · VAN KELDER</p>
<p class="kst__l kst__l2" aria-hidden="true">TOT NOK · TOT NOK · TOT NOK · TOT NOK · TOT NOK</p>
<p class="kst__l kst__l3">BOUWEN WIJ</p>
<p class="kst__l kst__l4" aria-hidden="true">IN LEIDEN · ALPHEN · KATWIJK · IN LEIDEN · ALPHEN</p>
<span class="kst__sr">Van kelder tot nok bouwen wij, in Leiden, Alphen en Katwijk.</span>
<div class="kst__hud"><span>Aannemersbedrijf Ter Laak</span><span class="kst__pc">000</span></div></div></div></div></div>
</div>

/* Kinetische typografie op scroll · NedDev · eigen werk. */
.kst{position:absolute;inset:0;background:#0a0a0a;color:#fff;overflow:hidden;container-type:size}
.kst__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;outline:none}
.kst__sc::-webkit-scrollbar{display:none}
.kst__track{height:320%}
.kst__pin{position:sticky;top:0;height:calc(100% / 3.2);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:2px}
.kst__l{margin:0;white-space:nowrap;font:800 clamp(24px,15cqh,46px)/.95 'Switzer',sans-serif;letter-spacing:-.04em;will-change:transform}
.kst__l1{color:#fff}
.kst__l2{color:transparent;-webkit-text-stroke:1px #8f8a84}
.kst__l3{background:linear-gradient(90deg,#F5480F 0 50%,#fff 50% 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding-left:14px;transform-origin:left center}
.kst__l4{color:#8f8a84;font-size:clamp(14px,8cqh,22px);letter-spacing:.02em;font-weight:600}
.kst__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kst__hud{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8f8a84}
.kst__pc{color:#F5480F;font-variant-numeric:tabular-nums}

// Kinetische typografie op scroll · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.kst')||root;
var sc=root.querySelector('.kst__sc'),l1=root.querySelector('.kst__l1'),l2=root.querySelector('.kst__l2'),l3=root.querySelector('.kst__l3'),l4=root.querySelector('.kst__l4'),pc=root.querySelector('.kst__pc');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,auto=!rm,t0=performance.now(),raf=0;
function draw(){var max=sc.scrollHeight-sc.clientHeight,p=max>0?sc.scrollTop/max:0,W=root.clientWidth;
l1.style.transform='translateX('+(-p*W*.9).toFixed(1)+'px)';
l2.style.transform='translateX('+(-W*.9+p*W*.9).toFixed(1)+'px)';
l3.style.transform='scale('+(1+p*.28).toFixed(3)+')';l3.style.backgroundPosition=(100-p*100).toFixed(1)+'% 0';
l4.style.transform='translateX('+(-p*W*.5).toFixed(1)+'px)';
pc.textContent=('00'+Math.round(p*100)).slice(-3)+' %';}
sc.addEventListener('scroll',draw,{passive:true});
function stop(){auto=false;}
['wheel','touchstart','pointerdown','keydown'].forEach(function(ev){root.addEventListener(ev,stop,{passive:true});});
function drift(now){if(!auto)return;var max=sc.scrollHeight-sc.clientHeight;var ph=((now-t0)/1000)*.45;sc.scrollTop=max*(.5-.5*Math.cos(ph));raf=requestAnimationFrame(drift);}
draw();if(auto)raf=requestAnimationFrame(drift);
}
init(document.querySelector('.jouw-container'));