Scroll Text Motion Nieuw

<!-- Scroll Text Motion · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="stm"><div class="stm__scroll"><div class="stm__in">
<p class="stm__l">Wij bouwen</p><p class="stm__l">websites die</p><p class="stm__l stm__l--o">verkopen.</p><p class="stm__l">Van Delft</p><p class="stm__l">tot Zwolle.</p>
</div></div><span class="stm__hint">scroll &darr;</span></div>
</div>

/* Scroll Text Motion · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.stm{position:absolute;inset:0;background:#0a0a0a;color:#fff;overflow:hidden}
.stm__scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.stm__scroll::-webkit-scrollbar{display:none}
.stm__in{padding:calc(50cqh - 22px) 14px 55cqh}
.stm__l{margin:0 0 18px;font:800 clamp(18px,6.4cqw,30px)/1.25 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;text-align:center;white-space:nowrap}
.stm{container-type:size}
.stm__l--o{color:#F5480F}
.stm__c{display:inline-block;will-change:transform}
.stm__hint{position:absolute;right:12px;bottom:10px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);pointer-events:none}

// Scroll Text Motion · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.stm')||root;var sc=root.querySelector('.stm__scroll');var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var lines=[].slice.call(root.querySelectorAll('.stm__l')).map(function(l){var t=l.textContent;l.textContent='';var cs=t.split('').map(function(ch){var s=document.createElement('span');s.className='stm__c';s.textContent=ch===' '?String.fromCharCode(160):ch;l.appendChild(s);return s;});return{el:l,cs:cs};});
if(reduce)return;var raf=0;
function upd(){raf=0;var H=sc.clientHeight,top=sc.getBoundingClientRect().top;lines.forEach(function(L){var r=L.el.getBoundingClientRect();var p=((r.top+r.height/2)-top-H/2)/(H/2);p=Math.max(-1.2,Math.min(1.2,p));var n=L.cs.length;
L.cs.forEach(function(c,j){var f=(j-(n-1)/2)/n;c.style.transform='translate3d(0,'+(p*Math.abs(f)*90+p*10).toFixed(1)+'px,0) rotate('+(p*f*50).toFixed(1)+'deg)';c.style.opacity=(1-Math.min(1,Math.abs(p))*.85).toFixed(2);});});}
sc.addEventListener('scroll',function(){if(!raf)raf=requestAnimationFrame(upd);},{passive:true});addEventListener('resize',upd);upd();
}
init(document.querySelector('.jouw-container'));