Verbouwing in drie fases op scroll New

The same kitchen in three photos: before, during and after. As you scroll the next phase wipes over the previous one, with a white line on the edge and a caption of what happened in that phase. The story of a renovation in one box, for the project page of a contractor, kitchen builder or painter. Own scroll box with keyboard support.

Voor: keuken uit 1986 met bruine kastjes en zeil op de vloer

Tijdens: kale ruimte met vers stucwerk en leidingen

Na: witte keuken met eiken werkblad en houten vloer

Keuken aan de Kleverparkweg, Haarlem

Voor Maart 2026: keuken uit 1986, tegels en zeil op de vloer.

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.

<!-- Verbouwing in drie fases op scroll · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="vf">
  <div class="vf__vak" tabindex="0" role="region" aria-label="Keukenverbouwing in drie fases. Scroll in dit vak van voor naar na.">
    <div class="vf__baan">
      <div class="vf__beeld">
        <img class="vf__foto" src="https://neddev.com/lab-media/r7scr-voorna-1.webp" alt="Voor: keuken uit 1986 met bruine kastjes en zeil op de vloer" width="1200" height="746">
        <img class="vf__foto vf__foto--2" src="https://neddev.com/lab-media/r7scr-voorna-2.webp" alt="Tijdens: kale ruimte met vers stucwerk en leidingen" width="1200" height="746" loading="lazy">
        <img class="vf__foto vf__foto--3" src="https://neddev.com/lab-media/r7scr-voorna-3.webp" alt="Na: witte keuken met eiken werkblad en houten vloer" width="1200" height="746" loading="lazy">
        <i class="vf__lijn" aria-hidden="true"></i>
        <p class="vf__titel">Keuken aan de Kleverparkweg, Haarlem</p>
        <p class="vf__fase" aria-live="polite"><strong>Voor</strong> <span>Maart 2026: keuken uit 1986, tegels en zeil op de vloer.</span></p>
      </div>
    </div>
  </div>
  <p class="vf__hint" aria-hidden="true">Scroll voor de verbouwing</p>
</div>
</div>

/* Verbouwing in drie fases op scroll · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.vf{position:absolute;inset:0;container-type:size;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#0a0a0a}
.vf__vak{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none}
.vf__vak::-webkit-scrollbar{display:none}
.vf__vak:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.vf__baan{height:500cqh}
.vf__beeld{position:sticky;top:0;height:100cqh;overflow:hidden}
.vf__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vf__foto--2,.vf__foto--3{clip-path:inset(0 100% 0 0)}
.vf__lijn{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#fff;opacity:0}
.vf__titel{position:absolute;left:10px;top:10px;margin:0;max-width:70%;font-size:12px;font-weight:600;background:#fff;padding:3px 8px;border-radius:4px}
.vf__fase{position:absolute;left:10px;bottom:10px;right:10px;max-width:280px;margin:0;font-size:12px;line-height:1.35;background:#fff;padding:6px 9px;border-radius:4px}
.vf__fase strong{display:block;font-size:15px;color:#b83a0b}
.vf__hint{position:absolute;right:10px;top:10px;margin:0;font-size:12px;background:#F5480F;color:#0a0a0a;padding:3px 8px;border-radius:4px;pointer-events:none;transition:opacity .3s}
.vf.is-weg .vf__hint{opacity:0}
@container (max-width:360px){.vf__hint{display:none}}

// Verbouwing in drie fases op scroll · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.vf'); if (!w) return;
    const vak = w.querySelector('.vf__vak'), f2 = w.querySelector('.vf__foto--2'), f3 = w.querySelector('.vf__foto--3'), lijn = w.querySelector('.vf__lijn'), fase = w.querySelector('.vf__fase');
    const T = [['Voor', 'Maart 2026: keuken uit 1986, tegels en zeil op de vloer.'], ['Tijdens', 'Week 3: alles eruit, leidingen verlegd, muren gestuukt.'], ['Na', 'Juni 2026: opgeleverd in zes weken, eiken blad en houten vloer.']];
    const cl = v => v < 0 ? 0 : v > 1 ? 1 : v;
    let raf = 0, nu = 0;
    function teken() {
      raf = 0; const m = vak.scrollHeight - vak.clientHeight, p = m > 0 ? vak.scrollTop / m : 0;
      const a = cl((p - .08) / .34), b = cl((p - .56) / .34);
      f2.style.clipPath = 'inset(0 ' + ((1 - a) * 100).toFixed(2) + '% 0 0)';
      f3.style.clipPath = 'inset(0 ' + ((1 - b) * 100).toFixed(2) + '% 0 0)';
      const g = a > 0 && a < 1 ? a : b > 0 && b < 1 ? b : -1;
      lijn.style.opacity = g < 0 ? 0 : 1; if (g >= 0) lijn.style.left = (g * 100) + '%';
      const i = b > .5 ? 2 : a > .5 ? 1 : 0;
      if (i !== nu) { nu = i; fase.innerHTML = '<strong>' + T[i][0] + '</strong> <span>' + T[i][1] + '</span>'; }
      w.classList.toggle('is-weg', vak.scrollTop > 8);
    }
    vak.addEventListener('scroll', () => { if (!raf) raf = requestAnimationFrame(teken); }, { passive: true });
    teken();
}
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 →