Utwórz projekt ↗
HTML / CSS · KOD NA LICENCJI MIT

Tekst w ruchu: lewitujący napis

Lewitujący napis. Edytuj treść i wygląd, a potem skopiuj kod.

Edytuj HTML, CSS i JS ↗ Otwórz konfigurator ↗

Gdzie wykorzystać ten przykład?

Krótkie hasła, wyróżniki i oznaczenia. Wariant „Tekst w ruchu: lewitujący napis” możesz dopasować do kolorów i treści swojej strony.

Jak działa ten efekt?

Keyframes opisują kolejne stany tekstu, a animation powtarza przejście. W zależności od wariantu porusza się cały napis, jego litery lub tło widoczne wewnątrz znaków.

Jak dodać go na stronę?

  1. Otwórz przykład w edytorze i podmień tekst oraz kolory.
  2. HTML wstaw w miejscu, w którym ma pojawić się element.
  3. CSS przenieś do arkusza stylów swojej strony. Reguły body z podglądu dopasuj do własnego układu.
  4. Sprawdź działanie na telefonie, klawiaturą i z własną treścią.

Na co zwrócić uwagę?

Stosuj ruch oszczędnie. Długie akapity powinny pozostać nieruchome, a preferencja ograniczonego ruchu powinna wyłączać powtarzanie.

Co możesz zmienić w konfiguratorze?

Tekst przykładu, Kolor akcentu, Czas animacji. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.

Gotowy kod: Tekst w ruchu: lewitujący napis

HTML

<div class="effect"><h2 class="loop"><span style="animation-delay:0ms">T</span><span style="animation-delay:65ms">e</span><span style="animation-delay:130ms">k</span><span style="animation-delay:195ms">s</span><span style="animation-delay:260ms">t</span><span style="animation-delay:325ms"> </span><span style="animation-delay:390ms">w</span><span style="animation-delay:455ms"> </span><span style="animation-delay:520ms">r</span><span style="animation-delay:585ms">u</span><span style="animation-delay:650ms">c</span><span style="animation-delay:715ms">h</span><span style="animation-delay:780ms">u</span></h2></div>

CSS

*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.loop{padding:20px}.loop span{display:inline-block;white-space:pre;animation:action 1200ms ease-in-out infinite}@keyframes action{50%{transform:translateY(-9px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}

Podobne przykłady

Tekst w ruchu: fala liter ↗Tekst w ruchu: podskakujące litery ↗Tekst w ruchu: spokojny oddech ↗Tekst w ruchu: miękkie pulsowanie ↗Tekst w ruchu: płynący gradient ↗Tekst w ruchu: przebieg światła ↗