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

Pojawianie tekstu: odsłonięcie od lewej

Odsłonięcie od lewej. Edytuj treść i wygląd, a potem skopiuj kod.

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

Gdzie wykorzystać ten przykład?

Nagłówki otwierające stronę i krótkie komunikaty. Wariant „Pojawianie tekstu: odsłonięcie od lewej” możesz dopasować do kolorów i treści swojej strony.

Jak działa ten efekt?

Animacja zmienia położenie, skalę lub przezroczystość tekstu. Warianty literowe dzielą napis na elementy, dzięki czemu można ustawić opóźnienia kolejnych 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ę?

Zachowaj czytelny tekst również po wyłączeniu animacji. Przy dzieleniu napisu pilnuj całych słów, aby nie łamały się w przypadkowych miejscach.

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: Pojawianie tekstu: odsłonięcie od lewej

HTML

<div class="effect"><h2 class="entrance"><span style="animation-delay:0ms">Pojawianie tekstu</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}.entrance{overflow:hidden;padding:25px}.entrance span{display:inline-block;white-space:pre-wrap;animation:action 1200ms ease both}@keyframes action{from{opacity:0;transform:translateX(-20px);filter:blur(0px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;filter:blur(0);clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}

Podobne przykłady

Pojawianie tekstu: od dołu ↗Pojawianie tekstu: od góry ↗Pojawianie tekstu: z lewej ↗Pojawianie tekstu: z prawej ↗Pojawianie tekstu: powiększenie ↗Pojawianie tekstu: pomniejszenie ↗