Kop met wisselend woord en foto New

A typographic hero where one word rolls up to the next every few seconds, with a small photo in front that changes along (kitchen, bathroom, attic, extension). The width follows the word, there is a pause button and screen readers hear one fixed sentence. Use it as the hero of a contractor, installer or service business with a few main services. With reduced motion it stays on the first word.

Wij verbouwen je keuken, badkamer, zolder of aanbouw in Haarlem en omgeving.

Plan een gratis adviesgesprek

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.

<!-- Kop met wisselend woord en foto · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hwf">
<h2 class="hwf__h"><span class="hwf__sr">Wij verbouwen je keuken, badkamer, zolder of aanbouw in Haarlem en omgeving.</span>
<span class="hwf__vis" aria-hidden="true">Wij verbouwen je <span class="hwf__slot"><span class="hwf__ph"><span class="hwf__col"><img src="https://neddev.com/lab-media/hk-woord-foto-1.webp" alt=""><img src="https://neddev.com/lab-media/hk-woord-foto-2.webp" alt=""><img src="https://neddev.com/lab-media/hk-woord-foto-3.webp" alt=""><img src="https://neddev.com/lab-media/hk-woord-foto-4.webp" alt=""></span></span><span class="hwf__wd"><span class="hwf__col"><span>keuken</span><span>badkamer</span><span>zolder</span><span>aanbouw</span></span></span></span> in Haarlem en omgeving.</span></h2>
<div class="hwf__row">
<a class="hwf__cta" href="#hk-woord-foto">Plan een gratis adviesgesprek</a>
<button class="hwf__pause" type="button" aria-pressed="false" aria-label="Wisselen pauzeren"><svg viewBox="0 0 16 16" aria-hidden="true"><path class="hwf__ip" d="M5 3v10M11 3v10"/><path class="hwf__iy" d="M5 3l8 5-8 5z"/></svg></button>
</div>
</div>
</div>

/* Kop met wisselend woord en foto · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hwf{position:absolute;inset:0;overflow:hidden;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,5cqh,24px);padding:0 clamp(16px,5cqi,40px)}
.hwf *,.hwf *::before,.hwf *::after{box-sizing:border-box}
.hwf__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hwf__h{margin:0;font:700 clamp(20px,7.4cqi,52px)/1.12 'Switzer',sans-serif;letter-spacing:-.03em}
.hwf__slot{display:inline-flex;align-items:center;gap:.16em;vertical-align:bottom;height:1.12em}
.hwf__ph{position:relative;display:inline-block;width:1.5em;height:.92em;border-radius:4px;overflow:hidden;background:#dcd8d1}
.hwf__ph .hwf__col img{display:block;width:100%;height:.92em;object-fit:cover}
.hwf__wd{display:inline-block;height:1.12em;overflow:hidden;color:#F5480F;transition:width .5s cubic-bezier(.3,.7,.2,1)}
.hwf__wd .hwf__col span{display:block;height:1.12em;white-space:nowrap}
.hwf__col{display:block;transition:transform .6s cubic-bezier(.6,0,.2,1)}
.hwf__row{display:flex;align-items:center;gap:10px}
.hwf__cta{padding:10px 14px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 13px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.hwf__cta:hover{background:#2a2a2a}
.hwf__pause{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid rgba(10,10,10,.3);border-radius:4px;background:transparent;color:#0a0a0a;cursor:pointer}
.hwf__pause:hover{border-color:#0a0a0a}
.hwf__pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.hwf__iy{display:none}.hwf__pause[aria-pressed="true"] .hwf__ip{display:none}.hwf__pause[aria-pressed="true"] .hwf__iy{display:inline}
.hwf__cta:focus-visible,.hwf__pause:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hwf__col,.hwf__wd{transition:none}}

// Kop met wisselend woord en foto · © 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('.hwf');if(!w)return;
const cols=w.querySelectorAll('.hwf__col'),wd=w.querySelector('.hwf__wd'),words=[...wd.querySelectorAll('span')],btn=w.querySelector('.hwf__pause');
const N=words.length,rm=matchMedia('(prefers-reduced-motion: reduce)').matches;let i=0,iv=0,paused=rm,vis=true;
function show(){cols.forEach(c=>c.style.transform='translateY('+(-i*(c.parentNode===wd?1.12:.92))+'em)');wd.style.width=words[i].scrollWidth+'px';}
function tick(){i=(i+1)%N;show();}
function run(){clearInterval(iv);if(!paused&&vis)iv=setInterval(tick,2400);}
btn.addEventListener('click',()=>{paused=!paused;btn.setAttribute('aria-pressed',paused);btn.setAttribute('aria-label',paused?'Wisselen hervatten':'Wisselen pauzeren');run();});
if(rm){btn.setAttribute('aria-pressed','true');btn.setAttribute('aria-label','Wisselen hervatten');}
const fit=()=>{wd.style.width=words[i].scrollWidth+'px';};
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(fit);
if('ResizeObserver' in window)new ResizeObserver(fit).observe(w);
if('IntersectionObserver' in window)new IntersectionObserver(es=>{vis=es[0].isIntersecting;run();}).observe(w);
show();run();
}
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 →