SVG Filter Text on Scroll New
Headlines that enter distorted through an SVG turbulence filter and sharpen at the centre of the view.
Elke pagina
telt mee
voor je
vindbaarheid.
How to use it
- Paste the HTML where the scroll effects should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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 ↓</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'));More scroll effects
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →