Beeld in de letters New

A large word with a photo slowly drifting through the letters, using background-clip: text. For a hero or section heading where the word itself carries the image, such as gardens for a landscaper. The word stays real text; without support it simply turns black, and a button stops the image.

Tuinen

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

How to use it

Paste the HTML where the text animations 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.

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

More text animations

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 →