Letters trekken samen Nieuw

Een naam of kop komt binnen met wijde letterafstand en zachte blur en trekt in ruim een seconde samen tot normale spatiëring; de regel eronder volgt iets later. Eén keer bij in beeld komen. Voor de naam van een restaurant, hotel of salon in de hero; zonder JS of met reduced motion staat alles direct goed.

Het Veerhuis

Brasserie aan de Lek in Schoonhoven. Keuken open van 12.00 tot 21.30 uur.

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.

<!-- Letters trekken samen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lai">
  <h3 class="lai__h">Het Veerhuis</h3>
  <p class="lai__s">Brasserie aan de Lek in Schoonhoven. Keuken open van 12.00 tot 21.30 uur.</p>
  <button class="lai__knop" type="button">Opnieuw afspelen</button>
</div>
</div>

/* Letters trekken samen · NedDev · eigen werk. */
.lai{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 18px;overflow:hidden;font-family:'Switzer',system-ui,sans-serif;color:#fff;background:#0a0a0a;text-align:center}
.lai__h{margin:0;max-width:100%;white-space:nowrap;font-weight:700;font-size:clamp(34px,12cqw,54px);line-height:1;letter-spacing:-.025em}
.lai__s{margin:0;max-width:34ch;font-size:13px;line-height:1.45;color:#cfcfcf}
.lai__knop{margin-top:6px;min-height:28px;padding:5px 10px;border:1px solid rgba(255,255,255,.4);border-radius:4px;background:transparent;color:#fff;font:500 12px/1 'Switzer',system-ui,sans-serif;cursor:pointer}
.lai__knop:hover{border-color:#fff}
.lai__knop:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.lai.is-js .lai__h,.lai.is-js .lai__s{opacity:0}
.lai.is-js.is-in .lai__h{animation:lai-h 1.25s cubic-bezier(.2,.7,.2,1) both}
.lai.is-js.is-in .lai__s{animation:lai-s 1s cubic-bezier(.2,.7,.2,1) .4s both}
@keyframes lai-h{from{letter-spacing:.45em;opacity:0;filter:blur(8px)}55%{opacity:1}to{letter-spacing:-.025em;opacity:1;filter:blur(0)}}
@keyframes lai-s{from{letter-spacing:.3em;opacity:0}to{letter-spacing:0;opacity:1}}
@media (prefers-reduced-motion:reduce){.lai .lai__h,.lai .lai__s{opacity:1!important;animation:none!important}.lai__knop{display:none}}

// Letters trekken samen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.lai'); if (!w) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    w.classList.add('is-js');
    const speel = () => { w.classList.remove('is-in'); void w.offsetWidth; w.classList.add('is-in'); };
    if ('IntersectionObserver' in window) {
      const io = new IntersectionObserver(e => { if (e[0].isIntersecting) { speel(); io.disconnect(); } }, { threshold: .5 });
      io.observe(w);
    } else w.classList.add('is-in');
    w.querySelector('.lai__knop').addEventListener('click', speel);
}
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 →