Verbouwing in drie fases op scroll Nieuw

<!-- 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'));