Footer-woordmerk in drie varianten New
Complete footer for a carpentry firm with a full-width wordmark in three variants: letters slide up when the footer enters view, letters follow the mouse gently (fine pointers only), or the outline fills letter by letter. IntersectionObserver starts the reveal once; a "Replay" button. With prefers-reduced-motion the wordmark is shown filled right away.
How to use it
- Paste the HTML where the page sections 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.
<!-- Footer-woordmerk in drie varianten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fwv"><div class="fwv__ft">
<div class="fwv__kop"><p class="fwv__cta">Een kozijn, trap of complete verbouwing? <a href="#">Vraag een offerte aan</a></p>
<div class="fwv__keus"><div class="fwv__tabs" role="tablist" aria-label="Woordmerk-variant"><button type="button" role="tab" aria-selected="true" data-v="a">Onthulling</button><button type="button" role="tab" aria-selected="false" data-v="b" tabindex="-1">Volgt cursor</button><button type="button" role="tab" aria-selected="false" data-v="c" tabindex="-1">Outline naar vol</button></div><button class="fwv__opn" type="button">Speel opnieuw</button></div></div>
<div class="fwv__cols">
<div class="fwv__col"><p class="fwv__ch">Timmerbedrijf Brouwer</p><p>Noorderkade 40<br>1811 LH Alkmaar</p><p><a href="tel:0721234567">072 123 4567</a><br><a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></p></div>
<div class="fwv__col"><p class="fwv__ch">Werk</p><a href="#">Kozijnen en deuren</a><a href="#">Trappen</a><a href="#">Dakkapellen</a><a href="#">Verbouwingen</a></div>
<div class="fwv__col"><p class="fwv__ch">Bedrijf</p><a href="#">Over ons</a><a href="#">Projecten</a><a href="#">Werken bij</a><a href="#">Veelgestelde vragen</a></div>
<div class="fwv__col"><p class="fwv__ch">Keurmerken</p><p>Bouwgarant · VCA* · Erkend leerbedrijf SBB</p><p>Werkplaats open ma t/m vr 7:00 tot 16:30</p></div>
</div>
<div class="fwv__wm" data-v="a" role="tabpanel" aria-label="Woordmerk Brouwer"><span class="fwv__sr">Brouwer</span><span class="fwv__lt" aria-hidden="true">BROUWER</span></div>
<div class="fwv__bar"><span>© 2026 Timmerbedrijf Brouwer · KvK 81234567 · btw NL001234567B01</span><span><a href="#">Privacy</a><a href="#">Voorwaarden</a></span></div>
</div></div>
</div>/* Footer-woordmerk in drie varianten · NedDev · eigen werk. */
/* fonts (Fontshare): cabinet-grotesk@500,800 */
.fwv{--fwv-bg:#1d1a16;--fwv-tx:#efe9df;--fwv-mu:#b3aa9c;--fwv-ac:#e0a458;background:var(--fwv-bg);color:var(--fwv-tx);font-family:'Switzer',system-ui,sans-serif;container-type:inline-size;overflow:hidden}
.fwv a{color:var(--fwv-tx)}
.fwv a:focus-visible,.fwv button:focus-visible{outline:2px solid var(--fwv-ac);outline-offset:3px}
.fwv__ft{padding:34px 40px 0}
.fwv__kop{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(239,233,223,.14)}
.fwv__cta{margin:0;font:500 22px/1.3 'Cabinet Grotesk','Switzer',sans-serif;max-width:40ch}
.fwv__cta a{color:var(--fwv-ac);text-underline-offset:4px;transition:color .18s}
.fwv__cta a:hover{color:#f3c88e}
.fwv__keus{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fwv__tabs{display:flex;border:1px solid rgba(239,233,223,.25);border-radius:999px;padding:3px}
.fwv__tabs button{font:600 12px/1 'Switzer',sans-serif;padding:8px 12px;border-radius:999px;border:0;background:transparent;color:var(--fwv-mu);cursor:pointer;transition:background .18s,color .18s}
.fwv__tabs button:hover{color:var(--fwv-tx)}
.fwv__tabs button[aria-selected="true"]{background:var(--fwv-tx);color:var(--fwv-bg)}
.fwv__opn{font:600 12px/1 'Switzer',sans-serif;padding:9px 12px;border-radius:999px;border:1px solid rgba(239,233,223,.25);background:transparent;color:var(--fwv-tx);cursor:pointer;transition:border-color .18s}
.fwv__opn:hover{border-color:var(--fwv-ac)}
.fwv__opn:disabled{opacity:.35;cursor:default}
.fwv__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:28px;padding:26px 0 10px}
.fwv__col{font-size:14px;line-height:1.55;color:var(--fwv-mu)}
.fwv__col p{margin:0 0 10px}
.fwv__ch{font:500 11px 'JetBrains Mono',monospace!important;letter-spacing:.08em;text-transform:uppercase;color:var(--fwv-ac)!important}
.fwv__col a{display:block;color:var(--fwv-tx);text-decoration:none;padding:2px 0;transition:color .18s}
.fwv__col p a{display:inline}
.fwv__col a:hover{color:var(--fwv-ac)}
.fwv__wm{position:relative;padding:4px 0 0;line-height:.78;user-select:none}
.fwv__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fwv__lt{display:flex;justify-content:space-between;font:800 calc((100cqi - 80px) * .2)/.82 'Cabinet Grotesk','Switzer',sans-serif;letter-spacing:-.02em;overflow:hidden;padding-top:.1em}
.fwv__c{display:inline-block;will-change:transform}
.fwv__wm[data-v="a"] .fwv__c{transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.15,1) calc(var(--i)*55ms)}
.fwv__wm[data-v="a"].is-in .fwv__c{transform:none}
.fwv__wm[data-v="b"] .fwv__c{color:var(--fwv-tx)}
.fwv__wm[data-v="b"] .fwv__c.is-dicht{color:var(--fwv-ac)}
.fwv__wm[data-v="c"] .fwv__c{color:transparent;-webkit-text-stroke:1.5px var(--fwv-tx);background:linear-gradient(var(--fwv-tx),var(--fwv-tx)) 0 100%/100% 0% no-repeat;-webkit-background-clip:text;background-clip:text;transition:background-size .7s cubic-bezier(.6,0,.2,1) calc(var(--i)*90ms)}
.fwv__wm[data-v="c"].is-in .fwv__c{background-size:100% 100%}
.fwv__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0 20px;font-size:12px;color:var(--fwv-mu);border-top:1px solid rgba(239,233,223,.14)}
.fwv__bar a{margin-left:16px;text-decoration:none;transition:color .18s}
.fwv__bar a:hover{color:var(--fwv-ac)}
@container (max-width:900px){.fwv__cols{grid-template-columns:1fr 1fr}}
@container (max-width:560px){.fwv__ft{padding:24px 16px 0}.fwv__cta{font-size:18px}.fwv__cols{gap:18px}.fwv__col{font-size:13px}.fwv__tabs button{padding:7px 9px;font-size:11px}.fwv__bar a{margin:0 14px 0 0}.fwv__lt{font-size:calc((100cqi - 32px) * .2)}}
@media (prefers-reduced-motion: reduce){.fwv__wm .fwv__c{transition:none!important;transform:none!important}.fwv__wm[data-v="c"] .fwv__c{background-size:100% 100%}}// Footer-woordmerk in drie varianten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.fwv')||root;
var wm=root.querySelector('.fwv__wm'),lt=root.querySelector('.fwv__lt'),tabs=[].slice.call(root.querySelectorAll('.fwv__tabs button')),opn=root.querySelector('.fwv__opn');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,fijn=matchMedia('(hover:hover) and (pointer:fine)').matches,zicht=false,v='a';
var tekst=lt.textContent;lt.textContent='';var cs=tekst.split('').map(function(ch,i){var s=document.createElement('span');s.className='fwv__c';s.textContent=ch;s.style.setProperty('--i',i);lt.appendChild(s);return s;});
function speel(){wm.classList.remove('is-in');void wm.offsetWidth;requestAnimationFrame(function(){wm.classList.add('is-in');});}
function kies(t,focus){v=t.getAttribute('data-v');tabs.forEach(function(b){var on=b===t;b.setAttribute('aria-selected',on?'true':'false');b.tabIndex=on?0:-1;});if(focus)t.focus();
wm.setAttribute('data-v',v);cs.forEach(function(c){c.style.transform='';c.classList.remove('is-dicht');});opn.disabled=(v==='b');if(rm){wm.classList.add('is-in');return;}if(zicht&&v!=='b')speel();else wm.classList.remove('is-in');}
tabs.forEach(function(b,k){b.addEventListener('click',function(){kies(b);});b.addEventListener('keydown',function(e){var d=e.key==='ArrowRight'?1:e.key==='ArrowLeft'?-1:0;if(d){e.preventDefault();kies(tabs[(k+d+tabs.length)%tabs.length],true);}});});
opn.addEventListener('click',function(){if(rm)return;speel();});
if(rm){wm.classList.add('is-in');}
else if('IntersectionObserver' in window){new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting&&!zicht){zicht=true;if(v!=='b')wm.classList.add('is-in');}});},{threshold:.35}).observe(wm);}
else{zicht=true;wm.classList.add('is-in');}
// variant b: letters volgen de cursor
var mx=-1e4,doel=cs.map(function(){return 0;}),nu=cs.map(function(){return 0;}),raf=0;
function stap(){var r=lt.getBoundingClientRect(),R=r.width*.22,bezig=false;cs.forEach(function(c,i){var b=c.getBoundingClientRect(),dx=Math.abs(b.left+b.width/2-mx),f=Math.max(0,1-dx/R);doel[i]=f;
nu[i]+=(doel[i]-nu[i])*.14;if(Math.abs(doel[i]-nu[i])>.002)bezig=true;c.style.transform='translateY('+(-nu[i]*14).toFixed(2)+'%) scaleY('+(1+nu[i]*.06).toFixed(3)+')';c.classList.toggle('is-dicht',nu[i]>.55);});
raf=bezig?requestAnimationFrame(stap):0;}
if(fijn&&!rm){root.addEventListener('pointermove',function(e){if(v!=='b'||e.pointerType!=='mouse')return;mx=e.clientX;if(!raf)raf=requestAnimationFrame(stap);});
root.addEventListener('pointerleave',function(){if(v!=='b')return;mx=-1e4;if(!raf)raf=requestAnimationFrame(stap);});}
}
init(document.querySelector('.jouw-container'));More page sections
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 →