Beeld in de letters Nieuw

Een groot woord waarin een foto langzaam door de letters schuift, met background-clip: text. Voor een hero of sectiekop waar het woord zelf het beeld draagt, zoals tuinen bij een hovenier. Het woord blijft echte tekst; zonder ondersteuning wordt het gewoon zwart, en een knop zet het beeld stil.

Tuinen

Hoveniersbedrijf De Linde ontwerpt, legt aan en onderhoudt tuinen in Amersfoort en Leusden.

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.

<!-- Beeld in de letters · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bil">
  <h3 class="bil__w">Tuinen</h3>
  <div class="bil__onder">
    <p class="bil__t">Hoveniersbedrijf De Linde ontwerpt, legt aan en onderhoudt tuinen in Amersfoort en Leusden.</p>
    <button class="bil__knop" type="button" aria-pressed="false">Beeld stilzetten</button>
  </div>
</div>
</div>

/* Beeld in de letters · NedDev · eigen werk. */
.bil{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;padding:14px 20px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#f4f3f1;text-align:left}
.bil__w{margin:0;font-weight:900;font-size:clamp(64px,30cqw,124px);line-height:.92;letter-spacing:-.045em;color:#0a0a0a}
@supports (background-clip:text) or (-webkit-background-clip:text){.bil__w{background-image:url('https://neddev.com/lab-media/beeld-in-letters-1.webp');background-size:190% auto;background-position:0% 70%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bil-drift 22s ease-in-out infinite alternate}}
@keyframes bil-drift{from{background-position:0% 75%}to{background-position:100% 55%}}
.bil.is-stil .bil__w{animation-play-state:paused}
.bil__onder{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:10px}
.bil__t{margin:0;font-size:13px;line-height:1.45;color:#2b2b2b;max-width:34ch}
.bil__knop{flex:none;min-height:30px;padding:6px 10px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:500 12.5px/1 'Switzer',system-ui,sans-serif;cursor:pointer}
.bil__knop:hover{background:#0a0a0a;color:#fff}
.bil__knop:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.bil__w{animation:none}.bil__knop{display:none}}

// Beeld in de letters · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.bil'); if (!w) return;
    const k = w.querySelector('.bil__knop');
    k.addEventListener('click', () => {
      const stil = w.classList.toggle('is-stil');
      k.setAttribute('aria-pressed', String(stil));
      k.textContent = stil ? 'Beeld afspelen' : 'Beeld stilzetten';
    });
}
init(document.querySelector('.jouw-container'));

Meer uit tekstanimaties

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 →