SVG Filter Text on Scroll Nieuw

<!-- SVG Filter Text on Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="sft"><svg class="sft__defs" aria-hidden="true" width="0" height="0"><defs>
<filter id="sft-f0" x="-10%" y="-40%" width="120%" height="180%"><feTurbulence type="fractalNoise" baseFrequency="0.015 0.09" numOctaves="2" seed="3"/><feDisplacementMap in="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"/></filter>
<filter id="sft-f1" x="-10%" y="-40%" width="120%" height="180%"><feTurbulence type="fractalNoise" baseFrequency="0.015 0.09" numOctaves="2" seed="7"/><feDisplacementMap in="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"/></filter>
<filter id="sft-f2" x="-10%" y="-40%" width="120%" height="180%"><feTurbulence type="fractalNoise" baseFrequency="0.015 0.09" numOctaves="2" seed="11"/><feDisplacementMap in="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"/></filter>
<filter id="sft-f3" x="-10%" y="-40%" width="120%" height="180%"><feTurbulence type="fractalNoise" baseFrequency="0.015 0.09" numOctaves="2" seed="19"/><feDisplacementMap in="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"/></filter>
</defs></svg><div class="sft__scroll"><div class="sft__in">
<p class="sft__l" data-f="0">Elke pagina</p><p class="sft__l sft__l--o" data-f="1">telt mee</p><p class="sft__l" data-f="2">voor je</p><p class="sft__l" data-f="3">vindbaarheid.</p>
</div></div><span class="sft__hint">scroll &darr;</span></div>
</div>

/* SVG Filter Text on Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.sft{position:absolute;inset:0;background:#fff;overflow:hidden;container-type:size}
.sft__defs{position:absolute;width:0;height:0;overflow:hidden}
.sft__scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.sft__scroll::-webkit-scrollbar{display:none}
.sft__in{padding:calc(50cqh - 24px) 14px 55cqh}
.sft__l{margin:0 0 22px;font:800 clamp(18px,6.6cqw,30px)/1.3 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;color:#0a0a0a;text-align:center;white-space:nowrap}
.sft__l--o{color:#F5480F}
.sft__hint{position:absolute;right:12px;bottom:10px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.5);pointer-events:none}

// SVG Filter Text on Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.sft')||root;var sc=root.querySelector('.sft__scroll');var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var L=[].slice.call(root.querySelectorAll('.sft__l')).map(function(el){var f=root.querySelector('#sft-f'+el.dataset.f);return{el:el,d:f.querySelector('feDisplacementMap')};});
if(reduce)return;L.forEach(function(o){o.el.style.filter='url(#sft-f'+o.el.dataset.f+')';});var raf=0;
function upd(){raf=0;var b=sc.getBoundingClientRect(),H=b.height;L.forEach(function(o){var r=o.el.getBoundingClientRect();var p=((r.top+r.height/2)-b.top-H/2)/(H/2);var a=Math.min(1,Math.max(0,Math.abs(p)-.12)/.8);o.d.setAttribute('scale',(a*a*90).toFixed(1));o.el.style.opacity=(1-a*.75).toFixed(2);});}
sc.addEventListener('scroll',function(){if(!raf)raf=requestAnimationFrame(upd);},{passive:true});addEventListener('resize',upd);upd();
}
init(document.querySelector('.jouw-container'));