Licht naar donker bij scroll
As the section scrolls through the viewport, the background moves from light to black and the text from black to white; marks the transition to a dark part.
Hoofdstuk 02's Avonds open,
's Avonds open,
als jij tijd hebt.
Fysiotherapie Maaszicht · ma t/m do tot 21:00
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.
<!-- 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'));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 →