Jaartal loopt mee met de scroll Nieuw

<!-- Jaartal loopt mee met de scroll · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="jt">
  <div class="jt__vak" tabindex="0" role="region" aria-label="Geschiedenis van Bakkerij Verhoeven in Gouda, van 1958 tot nu. Scroll in dit vak.">
    <div class="jt__baan">
      <div class="jt__beeld">
        <div class="jt__jaar" aria-hidden="true">1958</div>
        <div class="jt__mijl" aria-live="polite"><p class="jt__titel"><span class="jt__sr">1958: </span>Opa Kees opent de bakkerij</p><p class="jt__tekst">Aan de Lange Tiendeweg in Gouda, met één oven en één knecht.</p></div>
        <div class="jt__lijn" aria-hidden="true"><i class="jt__vul"></i></div>
      </div>
    </div>
  </div>
  <p class="jt__hint" aria-hidden="true">Scroll door de jaren</p>
</div>
</div>

/* Jaartal loopt mee met de scroll · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.jt{position:absolute;inset:0;container-type:size;background:#0a0a0a;color:#fff;font-family:'Switzer',system-ui,sans-serif}
.jt__vak{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none}
.jt__vak::-webkit-scrollbar{display:none}
.jt__vak:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.jt__baan{height:600cqh}
.jt__beeld{position:sticky;top:0;height:100cqh;display:flex;flex-direction:column;justify-content:center;padding:0 7cqw;box-sizing:border-box}
.jt__jaar{font-size:clamp(48px,22cqw,96px);font-weight:700;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#F5480F}
.jt__mijl{margin-top:10px;min-height:52px;transition:opacity .25s}
.jt__mijl.is-wissel{opacity:0}
.jt__titel{font-size:clamp(14px,4.2cqw,18px);font-weight:600;margin:0 0 3px}
.jt__tekst{font-size:clamp(12px,3.4cqw,14px);line-height:1.4;margin:0;color:#cfcfcf;max-width:40ch}
.jt__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jt__lijn{position:relative;height:2px;background:rgba(255,255,255,.2);margin-top:14px}
.jt__vul{position:absolute;left:0;top:0;height:100%;width:100%;background:#F5480F;transform-origin:left;transform:scaleX(0)}
.jt__tik{position:absolute;top:-4px;width:2px;height:10px;background:rgba(255,255,255,.45)}
.jt__tik.is-aan{background:#F5480F}
.jt__hint{position:absolute;right:10px;bottom:8px;margin:0;font-size:12px;background:#fff;color:#0a0a0a;padding:3px 8px;border-radius:4px;pointer-events:none;transition:opacity .3s}
.jt.is-weg .jt__hint{opacity:0}
@media (prefers-reduced-motion:reduce){.jt__mijl,.jt__hint{transition:none}}

// Jaartal loopt mee met de 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('.jt'); if (!w) return;
    const vak = w.querySelector('.jt__vak'), jaar = w.querySelector('.jt__jaar'), mijl = w.querySelector('.jt__mijl');
    const titel = w.querySelector('.jt__titel'), tekst = w.querySelector('.jt__tekst'), lijn = w.querySelector('.jt__lijn'), vul = w.querySelector('.jt__vul');
    const rm = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const A = 1958, B = 2026;
    const M = [[1958, 'Opa Kees opent de bakkerij', 'Aan de Lange Tiendeweg in Gouda, met één oven en één knecht.'], [1972, 'De eerste stroopwafels', 'Met de hand gebakken en op zaterdag verkocht op de kaasmarkt.'], [1989, 'Tweede winkel in Waddinxveen', 'Oma Riet zet daar de eerste koffiehoek neer.'], [2004, 'Bart neemt het over', 'De kleinzoon van Kees, bakker sinds zijn zestiende.'], [2017, 'Oven op groene stroom', 'Het gas eruit, zonnepanelen op het dak van de bakkerij.'], [2026, 'Nu: 14 mensen en 2 winkels', 'Elke ochtend om vier uur gaat het licht nog steeds aan.']];
    const tikken = M.map(m => { const t = document.createElement('span'); t.className = 'jt__tik'; t.style.left = ((m[0] - A) / (B - A) * 100) + '%'; lijn.appendChild(t); return t; });
    let raf = 0, nu = 0, timer = 0;
    function zetMijl(i) {
      const doe = () => { titel.innerHTML = '<span class="jt__sr">' + M[i][0] + ': </span>' + M[i][1]; tekst.textContent = M[i][2]; mijl.classList.remove('is-wissel'); };
      clearTimeout(timer);
      if (rm) doe(); else { mijl.classList.add('is-wissel'); timer = setTimeout(doe, 180); }
    }
    function teken() {
      raf = 0; const m = vak.scrollHeight - vak.clientHeight, p = m > 0 ? vak.scrollTop / m : 0;
      const j = Math.round(A + p * (B - A)); jaar.textContent = j;
      vul.style.transform = 'scaleX(' + p.toFixed(3) + ')';
      let i = 0; M.forEach((x, k) => { if (j >= x[0]) i = k; });
      tikken.forEach((t, k) => t.classList.toggle('is-aan', k <= i));
      if (i !== nu) { nu = i; zetMijl(i); }
      w.classList.toggle('is-weg', vak.scrollTop > 8);
    }
    vak.addEventListener('scroll', () => { if (!raf) raf = requestAnimationFrame(teken); }, { passive: true });
    teken();
}
init(document.querySelector('.jouw-container'));