Kop met wisselend woord en foto Nieuw

Een typografische hero waarin één woord om de paar seconden omhoog rolt naar het volgende, met een klein fotootje ervoor dat meewisselt (keuken, badkamer, zolder, aanbouw). De breedte groeit mee met het woord, er is een pauzeknop en schermlezers lezen één vaste zin. Inzetten als hero van een aannemer, installateur of dienstverlener met een paar hoofddiensten. Bij minder beweging staat hij stil op het eerste woord.

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

Plan een gratis adviesgesprek

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

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

Meer uit hero-stijlen

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →