Door de deur naar binnen scrollen New

A drawn facade with an open front door; as you scroll the doorway grows until you stand in the kitchen behind it and the text of the next section appears. A button does the same for those who do not scroll. Built with position:sticky and a single scroll listener inside its own container. Use it as the hero of an interior builder, kitchen showroom, contractor or estate agent. With reduced motion it jumps without smooth scrolling.

Lichte keuken met eiken kasten en een stenen werkblad

Kom maar binnen

Keukens en kasten op maat uit onze werkplaats in Haarlem.

De keuken van familie Bakker

Eiken fronten, een werkblad van natuursteen. Ontworpen en geplaatst in zes weken.

Bekijk dit project

How to use it

Paste the HTML where the hero styles 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.

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

More hero styles

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 →