8. diel - Animácie zobrazovanie textu pomocou CSS3

V minulej lekcii, Text a písmo 4. časť , sme si ukázali, ako pracovať s vlastnými fonty, meniť smer písma a napísať text veľkými písmenami tak, aby zostala malá.

Vitajte pri druhej lekcie ohľadom animácií v CSS3, v ktorej si ukážeme, ako vytvoriť efekty zobrazenie textu na stránke.

Čo sa v tejto lekcii naučíme vytvoriť?

Typewriter effect

Tejto konkrétnej animáciu, ktorú dnes budeme robiť, sa hovorí typewriter effect. Text sa nám totiž nezobrazí tak, ako obvykle (všetok naraz), ale postupne. Pritom to bude vyzerať, ako keby bol práve písaný. Kreativite sa medze síce nekladú, bohužiaľ možnosti CSS3 sú (teda aspoň zatiaľ) trochu obmedzené a pre zložitejšie animácie a efekty je potreba použiť JavaScript. Teraz si ukážeme niektoré základné, tie ho našťastie nepotrebujú.

Animácie písanie textu

Základný trik spočíva v tom, že text sa na stránke nachádza, len nie je vidieť. Potom sa vykoná animácia, ktorá nám ho zobrazí. Súčasťou ňou je aj okraj elementu (border), ktorý chceme zobraziť. Ten keď upravíme, vyzerá ako kariet pri písaní textu.

Najprv teda zvolíme element, ktorý chceme animovať:

<div class="typewriter">
  <h1>Náš text, který chce animaci.</h1>
</div>

Trochu upravíme telo stránky, veľkosť a font:

body {
  display: flex;
  justify-content: center;
}

h1 {
  font-family: monospace;
  font-size: 25px;
}

Font monospace je neproporcionálne písmo, to znamená, že každý znak má rovnakú šírku. Vďaka tomu sa text potom bude vypisovať lineárne:

Teraz prerobíme nadpis <h1> tak, že k nemu pridáme triedu .typewriter:

.typewriter h1 {
  font-family: monospace;
  font-size: 20px;
  overflow: hidden;
  border-right: .15em solid blue;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
}

Tu sme museli pridať vlastnosť overflow: hidden;, Aby text, ktorý ešte neprešiel animácií, nebol vidieť. Ďalej sme pridali okraj elementu border-right: .15em solid blue;, Ktorý bude vyzerať ako pohybujúce sa písací kurzor. white-space: nowrap; máme z dôvodu možnosti zalomenie textu pri nevhodnej šírke elementu. To znamená, že text bude napísaný na jednom riadku až k okraju, nehľadiac na šírku elementu v akom sa nachádza. Potom už je tu len úprava odsadenie pomocou margin: 0 auto; a letter-spacing: .15em, čo len vytvorí nepatrné medzery medzi písmenami:

Všetko máme pripravené, môžeme pridať CSS animácie:

.typewriter h1 {
  font-family: monospace;
  font-size: 20px;
  overflow: hidden;
  border-right: .15em solid blue;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation:
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: blue }
}

Vo výsledku budeme mať toto:

V tomto prípade som do animácie animation: typing 3.5s steps(30, end) pridal ešte atribút infinite, aby bola lepšie vidieť. Bez nej by sa vykonala a potom zastavila takto:

Steps

Môžeme si všimnúť, že pre takéto animácia je veľmi dôležitá vlastnosť animácie steps, v tomto prípade steps(30, end) a step-end. Vďaka tejto vlastnosti definujeme rozdelenie animácie na jednotlivé kroky. V zátvorke uvedieme najskôr počet krokov a potom konečný bod. Pre nás teda 30 krokov a end (čiže koniec animácie elementu).

Teraz sa dajú pri okraji elementu rôzne upravovať veľkosti alebo farby. Napríklad nejako takto:

<div id="typewriter">Náš text, který chce animaci.<div id="border"></div></div>

body {
  display: flex;
  justify-content: center;
}

#typewriter {
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  font-family: monospace;
  font-size: 28px;
  position: relative;
  animation: animated-text 2s steps(30,end) 1s 1 normal both;
}

#border {
  border-bottom: solid 3px rgba(8, 107, 8, 1);
  position: absolute;
  right: -7px;
  width: 20px;
  animation: animated-cursor 600ms steps(30,end) infinite;
}

@keyframes animated-text{
  from{width: 0;}
  to{width: 460px;}
}

@keyframes animated-cursor{
  from{border-bottom-color: rgba(8, 107, 8, 1);}
  to{border-bottom-color: transparent;}
}

V tomto prípade nepoužívame triedy, ale id jednotlivých elementov id=typewriter / #typewriter. Má to využitie, keď napríklad chceme animovať iba jednu časť elementu so spoločnou triedou.

V prehliadači budeme mať vďaka predchádzajúceho CSS tento výsledok:

A ak chceme border úplne vynechať:

<p>Náš text, který chce animaci.</p>

A CSS:

body {
  display: flex;
  justify-content: center;
}

p {
  white-space: nowrap;
  overflow: hidden;
  font-family: monospace;
  font-size: 20px;
  color: rgba(255,255,255,.70);
  animation: animated-text 2s steps(30,end) 1s 1 normal both;
}

@keyframes animated-text{
  from{width: 0;}
  to{width: 350px;}
}

V prehliadači žiadny kurzor nebude:

Pomocou týchto animácií možno text zobrazovať zo všetkých rôznych smerov s akoukoľvek rýchlosťou.

Ak vám nie je niečo jasné, všetky zobrazené ukážky si môžete stiahnuť v prílohe tejto lekcie.

V ďalšej lekcii, Animácie efektov pri interakcii s elementmi (tooltip) , si ukážeme, ako sa dajú meniť elementy, keď je používateľ napríklad prekryje kurzorom myši.