Paginaovergang met vaste header Nieuw

<!-- Paginaovergang met vaste header · NedDev · eigen werk. -->
<div class="jouw-container">
<!-- Echte multi-page site (geen JS nodig):
  1. Zet in de CSS van ELKE pagina:  @view-transition { navigation: auto; }
  2. Geef op beide pagina's de header view-transition-name: vpf-head en de main view-transition-name: vpf-main
  3. Neem de ::view-transition-old/new(vpf-main) regels uit de CSS hieronder over
  4. Reduced motion: @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
  Browsers zonder support (Firefox voor cross-document) navigeren gewoon zonder animatie. -->
<div class="vpf">
  <div class="vpf__head" role="banner">
    <span class="vpf__logo"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 16C4 8 9 4 16 4c0 7-4 12-12 12z"/><path d="M4 16l7-7"/></svg>Hoveniers De Linde</span>
    <nav class="vpf__nav" aria-label="Demo-navigatie">
      <a class="vpf__a" href="#vpf-home" data-p="home" aria-current="page">Home</a>
      <a class="vpf__a" href="#vpf-diensten" data-p="diensten">Diensten</a>
      <a class="vpf__a" href="#vpf-contact" data-p="contact">Contact</a>
    </nav>
  </div>
  <div class="vpf__main">
    <div class="vpf__page" data-p="home">
      <span class="vpf__kick">Tuinaanleg · Haarlem en omgeving</span>
      <h3 class="vpf__h" tabindex="-1">Een tuin die bij je huis past.</h3>
      <p class="vpf__p">Ontwerp, aanleg en onderhoud door één vaste ploeg. Tuinadvies aan huis is gratis.</p>
      <a class="vpf__btn" href="#vpf-diensten" data-p="diensten">Bekijk diensten</a>
    </div>
    <div class="vpf__page" data-p="diensten" hidden>
      <span class="vpf__kick">Diensten en tarieven 2026</span>
      <h3 class="vpf__h" tabindex="-1">Wat we doen</h3>
      <dl class="vpf__dl">
        <div><dt>Tuinontwerp met 3D-schets</dt><dd>vanaf € 450</dd></div>
        <div><dt>Bestrating leggen</dt><dd>€ 68 per m²</dd></div>
        <div><dt>Onderhoud op afspraak</dt><dd>€ 52 per uur</dd></div>
      </dl>
    </div>
    <div class="vpf__page" data-p="contact" hidden>
      <span class="vpf__kick">Contact</span>
      <h3 class="vpf__h" tabindex="-1">Kom langs of bel ons</h3>
      <p class="vpf__p">Kleverlaan 112, 2023 JK Haarlem<br>023 123 4567 · tuin@voorbeeld.nl<br>ma t/m vr 08:00 tot 17:00</p>
    </div>
  </div>
  <span class="vpf__sr" aria-live="polite"></span>
</div>
</div>

/* Paginaovergang met vaste header · NedDev · eigen werk. */
.vpf{position:absolute;inset:0;display:flex;flex-direction:column;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;overflow:hidden}
.vpf__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;background:#fff;border-bottom:1px solid rgba(10,10,10,.1)}
.vpf__logo{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;white-space:nowrap}
.vpf__logo svg{width:16px;height:16px;fill:none;stroke:#2f6b3a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vpf__nav{display:flex;gap:2px}
.vpf__a{font-size:12.5px;padding:6px 8px;border-radius:4px;color:rgba(10,10,10,.66);text-decoration:none;transition:color .15s,background-color .15s}
.vpf__a:hover{color:#0a0a0a;background:#f4f3f1}
.vpf__a[aria-current="page"]{color:#0a0a0a;font-weight:600;box-shadow:inset 0 -2px 0 #F5480F;border-radius:0}
.vpf__a:focus-visible,.vpf__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.vpf__h:focus{outline:none}
.vpf__main{flex:1;position:relative;padding:16px 18px;min-height:0}
.vpf__kick{display:block;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#2f6b3a;margin-bottom:6px}
.vpf__h{margin:0 0 8px;font-size:21px;line-height:1.15;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.vpf__p{margin:0 0 12px;font-size:13px;line-height:1.5;color:rgba(10,10,10,.72);max-width:34em}
.vpf__btn{display:inline-block;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:4px;background:#0a0a0a;color:#fff;text-decoration:none;transition:background-color .15s}
.vpf__btn:hover{background:#F5480F}
.vpf__btn:active{transform:translateY(1px)}
.vpf__dl{margin:0;display:grid;gap:0}
.vpf__dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(10,10,10,.1);font-size:13px}
.vpf__dl dt{margin:0}.vpf__dl dd{margin:0;font-family:'JetBrains Mono',monospace;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vpf__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:420px){.vpf__h{font-size:18px}.vpf__logo{font-size:12px}.vpf__a{padding:6px 6px;font-size:12px}.vpf__main{padding:12px 14px}.vpf__p{font-size:12.5px}}
/* View Transition: alleen de main beweegt, de header heeft een eigen naam en staat dus stil */
::view-transition-group(vpf-main){overflow:clip}
::view-transition-old(vpf-main){animation:vpf-out .15s cubic-bezier(.4,0,1,1) both}
::view-transition-new(vpf-main){animation:vpf-in .32s cubic-bezier(.2,.7,.2,1) .13s both}
@keyframes vpf-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vpf-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(vpf-main),::view-transition-old(vpf-main),::view-transition-new(vpf-main),::view-transition-old(vpf-head),::view-transition-new(vpf-head){animation:none}}

// Paginaovergang met vaste header · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.vpf');if(!w)return;var head=w.querySelector('.vpf__head'),main=w.querySelector('.vpf__main'),sr=w.querySelector('.vpf__sr');
var rm=matchMedia('(prefers-reduced-motion: reduce)');var cur='home',busy=false;
var titles={home:'Home',diensten:'Diensten',contact:'Contact'};
function show(p){w.querySelectorAll('.vpf__page').forEach(function(pg){pg.hidden=pg.dataset.p!==p;});w.querySelectorAll('.vpf__a').forEach(function(a){if(a.dataset.p===p)a.setAttribute('aria-current','page');else a.removeAttribute('aria-current');});cur=p;sr.textContent='Pagina '+titles[p];}
function go(p,kbd){if(p===cur||busy)return;var done=function(){if(kbd){var h=w.querySelector('.vpf__page[data-p="'+p+'"] .vpf__h');if(h)h.focus({preventScroll:true});}};
if(!document.startViewTransition||rm.matches){show(p);done();return;}
busy=true;head.style.viewTransitionName='vpf-head';main.style.viewTransitionName='vpf-main';
var t=document.startViewTransition(function(){show(p);});
t.finished.finally(function(){head.style.viewTransitionName='';main.style.viewTransitionName='';busy=false;done();});}
w.addEventListener('click',function(e){var a=e.target.closest('a[data-p]');if(!a||!w.contains(a))return;e.preventDefault();go(a.dataset.p,e.detail===0);});
}
init(document.querySelector('.jouw-container'));