Licht naar donker bij scroll

Terwijl de sectie door het scherm scrollt, loopt de achtergrond van licht naar zwart en de tekst van zwart naar wit; markeert de overgang naar een donker deel.

Hoofdstuk 02

's Avonds open,
als jij tijd hebt.

Fysiotherapie Maaszicht · ma t/m do tot 21:00

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Licht naar donker bij scroll · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-cis"><span class="ei-cis__k">Hoofdstuk 02</span><h3 class="ei-cis__h">'s Avonds open,<br>als jij tijd hebt.</h3><p class="ei-cis__p">Fysiotherapie Maaszicht · ma t/m do tot 21:00</p><div class="ei-cis__bar"><i></i></div></div>
</div>

/* Licht naar donker bij scroll · NedDev · eigen werk. */
.ei-cis{--p:0;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 26px;box-sizing:border-box;background:rgb(calc(244 - 234*var(--p)),calc(243 - 233*var(--p)),calc(241 - 231*var(--p)));color:rgb(calc(10 + 245*var(--p)),calc(10 + 245*var(--p)),calc(10 + 245*var(--p)))}
.ei-cis__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#F5480F}
.ei-cis__h{margin:10px 0;font-family:'Switzer',sans-serif;font-weight:800;font-size:clamp(24px,4.4vw,32px);line-height:1.05;letter-spacing:-.03em}
.ei-cis__p{margin:0;font-family:'Switzer',sans-serif;font-size:14px;opacity:.7}
.ei-cis__bar{position:absolute;left:26px;right:26px;bottom:18px;height:2px;background:rgba(128,128,128,.25)}
.ei-cis__bar i{display:block;height:100%;width:calc(var(--p)*100%);background:#F5480F}

// Licht naar donker bij scroll · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-cis'),raf=0;
function upd(){raf=0;var r=w.getBoundingClientRect(),vh=window.innerHeight;var c=r.top+r.height/2;var p=(vh*.8-c)/(vh*.5);p=Math.max(0,Math.min(1,p));p=p*p*(3-2*p);w.style.setProperty('--p',p.toFixed(3));}
window.addEventListener('scroll',function(){if(!raf)raf=requestAnimationFrame(upd);},{passive:true});window.addEventListener('resize',upd);upd();
}
init(document.querySelector('.jouw-container'));

Meer uit scroll-effecten

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →