Door de deur naar binnen scrollen Nieuw

<!-- Door de deur naar binnen scrollen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hdr">
<div class="hdr__sc" tabindex="0" aria-label="Hero van Werkplaats Spaarne, scroll om binnen te kijken">
<div class="hdr__track">
<div class="hdr__pin">
<div class="hdr__in"><img src="https://neddev.com/lab-media/hk-door-raam-1.webp" alt="Lichte keuken met eiken kasten en een stenen werkblad" width="1376" height="768"></div>
<svg class="hdr__gevel" viewBox="0 0 1000 625" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">
<defs><mask id="hdr-m" maskUnits="userSpaceOnUse" x="-2000" y="-2000" width="5000" height="5000"><rect x="-2000" y="-2000" width="5000" height="5000" fill="#fff"/><path d="M620 570 V 310 a 70 70 0 0 1 140 0 V 570 Z" fill="#000"/></mask></defs>
<g mask="url(#hdr-m)"><rect x="-2000" y="-2000" width="5000" height="5000" fill="#F5480F"/>
<rect x="600" y="570" width="180" height="22" fill="#0a0a0a"/>
<rect x="820" y="290" width="120" height="170" fill="#0a0a0a"/><path d="M880 290 V460 M820 375 H940" stroke="#F5480F" stroke-width="6"/>
<text x="690" y="218" text-anchor="middle" class="hdr__nr">24</text></g>
</svg>
<div class="hdr__a">
<h2 class="hdr__h">Kom maar binnen</h2>
<p class="hdr__p">Keukens en kasten op maat uit onze werkplaats in Haarlem.</p>
<button class="hdr__go" type="button">Kijk binnen</button>
</div>
<div class="hdr__b">
<h3 class="hdr__h3">De keuken van familie Bakker</h3>
<p class="hdr__p2">Eiken fronten, een werkblad van natuursteen. Ontworpen en geplaatst in zes weken.</p>
<a class="hdr__cta" href="#hk-door-raam">Bekijk dit project</a>
</div>
</div>
</div>
</div>
</div>
</div>

/* Door de deur naar binnen scrollen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hdr{position:absolute;inset:0;overflow:hidden;background:#F5480F;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.hdr *,.hdr *::before,.hdr *::after{box-sizing:border-box}
.hdr__sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.hdr__sc::-webkit-scrollbar{display:none}
.hdr__sc:focus-visible{outline:2px solid #0a0a0a;outline-offset:-4px}
.hdr__track{height:320cqh}
.hdr__pin{position:sticky;top:0;height:100cqh;overflow:hidden}
.hdr__in{position:absolute;inset:0;transform:scale(calc(1.35 - var(--p,0)*.35))}
.hdr__in img{display:block;width:100%;height:100%;object-fit:cover}
.hdr__gevel{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:69% 70%;transform:scale(calc(1 + var(--p,0)*var(--p,0)*14))}
.hdr__nr{font:700 64px/1 'Switzer',sans-serif;fill:#0a0a0a}
.hdr__a{position:absolute;left:20px;top:18px;width:52%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;opacity:calc(1 - var(--p,0)*4)}
.hdr__h{margin:0;font:700 clamp(22px,8cqi,48px)/1 'Switzer',sans-serif;letter-spacing:-.025em}
.hdr__p{margin:0;font:400 clamp(12px,3cqi,16px)/1.4 'Switzer',sans-serif}
.hdr__go{min-height:32px;padding:0 14px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s}
.hdr__go:hover{background:#2a2a2a}
.hdr__go:focus-visible,.hdr__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hdr__b{position:absolute;left:16px;right:16px;bottom:16px;max-width:360px;padding:14px 16px;background:#fff;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;opacity:clamp(0,calc((var(--p,0) - .8)*5),1);visibility:var(--bv,hidden)}
.hdr__h3{margin:0;font:700 clamp(16px,4.2cqi,24px)/1.1 'Switzer',sans-serif;letter-spacing:-.015em}
.hdr__p2{margin:0;font:400 clamp(12px,2.6cqi,14px)/1.4 'Switzer',sans-serif;color:#3a3833}
.hdr__cta{margin-top:4px;padding:9px 14px;background:#F5480F;color:#0a0a0a;border-radius:4px;font:600 13px/1 'Switzer',sans-serif;text-decoration:none}
.hdr__cta:hover{background:#ff6a36}

// Door de deur naar binnen scrollen · © 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('.hdr');if(!w)return;
const sc=w.querySelector('.hdr__sc'),pin=w.querySelector('.hdr__pin'),go=w.querySelector('.hdr__go');
const uid='hdr-m-'+Math.random().toString(36).slice(2,8);w.querySelector('mask').id=uid;w.querySelector('.hdr__gevel g').setAttribute('mask','url(#'+uid+')');
const rm=matchMedia('(prefers-reduced-motion: reduce)').matches;let raf=0;
function upd(){raf=0;const max=sc.scrollHeight-sc.clientHeight||1;const p=Math.min(1,Math.max(0,sc.scrollTop/(max*.85)));
pin.style.setProperty('--p',p.toFixed(4));pin.style.setProperty('--bv',p>.8?'visible':'hidden');w.querySelector('.hdr__a').style.visibility=p>.25?'hidden':'visible';}
sc.addEventListener('scroll',()=>{if(!raf)raf=requestAnimationFrame(upd);},{passive:true});
go.addEventListener('click',()=>{sc.scrollTo({top:sc.scrollHeight,behavior:rm?'auto':'smooth'});setTimeout(()=>{const c=w.querySelector('.hdr__cta');c&&c.focus({preventScroll:true});},rm?50:1100);});
upd();
}
init(document.querySelector('.jouw-container'));