BLACK FRIDAY! Slevy až 80 % jsou všude. Tak je nepropásni a přejdi do rostoucího IT oboru!
BF Sales

Lekce 8 - Animace zobrazování textu pomocí CSS3

V předchozí lekci, Úvod do animací elementů pomocí CSS3, jsme se dozvěděli, co jsou to @keyframes a jak fungují animace v CSS3.

Vítejte u druhé lekce ohledně animací v CSS3, ve které si ukážeme, jak vytvořit efekty zobrazení textu na stránce.

Co se v této lekci naučíme vytvořit?

Animace textu
localhost

Typewriter effect

Této konkrétní animaci, kterou dnes budeme dělat, se říká typewriter effect. Text se nám totiž nezobrazí tak, jako obvykle (všechen najednou), ale postupně. Přitom to bude vypadat, jako kdyby byl právě psán. Kreativitě se meze sice nekladou, bohužel možnosti CSS3 jsou (tedy aspoň prozatím) poněkud omezené a pro složitější animace a efekty je potřeba použít JavaScript. Nyní si ukážeme některé základní, ty ho naštěstí nepotřebují.

Animace psaní textu

Základní trik spočívá v tom, že text se na stránce nachází, jenom není vidět. Poté se provede animace, která nám ho zobrazí. Součástí ní je i okraj elementu (border), který chceme zobrazit. Ten když upravíme, vypadá jako karet při psaní textu.

Nejprve tedy zvolíme element, který chceme animovat:

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

Trochu upravíme tělo stránky, velikost a font:

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

h1 {
  font-family: monospace;
  font-size: 25px;
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Font monospace je neproporcionální písmo, to znamená, že každý znak má stejnou šířku. Díky tomu se text pak bude vypisovat lineárně:

Animace - Text
localhost

Nyní předěláme nadpis <h1> tak, že k němu přidáme třídu .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;
}

Zde jsme museli přidat vlastnost overflow: hidden;, aby text, který ještě neprošel animací, nebyl vidět. Dále jsme přidali okraj elementu border-right: .15em solid blue;, který bude vypadat jako pohybující se psací kurzor. white-space: nowrap; máme z důvodu možnosti zalomení textu při nevhodné šířce elementu. To znamená, že text bude napsán na jednom řádku až k okraji, nehledě na šířku elementu v jakém se nachází. Pak už je tu pouze úprava odsazení pomocí margin: 0 auto; a letter-spacing: .15em, což pouze vytvoří nepatrné mezery mezi písmeny:

Animace - Text
localhost

Vše máme připraveno, můžeme přidat CSS animace:

.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 }
}

Ve výsledku budeme mít toto:

Animace - Text
localhost

V tomto případě jsem do animace animation: typing 3.5s steps(30, end) přidal ještě atribut infinite, aby byla lépe vidět. Bez ní by se provedla a pak zastavila takto:

Animace - Text
localhost

Steps

Můžeme si všimnout, že pro takovéto animace je velice důležitá vlastnost animace steps, v tomto případě steps(30, end) a step-end. Díky této vlastnosti definujeme rozdělení animace na jednotlivé kroky. V závorce uvedeme nejdřív počet kroků a pak konečný bod. Pro nás tedy 30 kroků a end (neboli konec animace elementu).

Nyní se dají u okraje elementu různě upravovat velikosti nebo barvy. Například nějak 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 případě nepoužíváme třídy, ale id jednotlivých elementů id=typewriter/#typewriter. Má to využití, když například chceme animovat pouze jednu část elementu se společnou třídou.

V prohlížeči budeme mít díky předchozího CSS tento výsledek:

Animace - Text
localhost

A pokud chceme border úplně vynechat:

<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 prohlížeči žádný kurzor nebude:

Animace - Text
localhost

Pomocí těchto animací lze text zobrazovat ze všech různých směrů s jakoukoliv rychlostí.

Pokud vám není něco jasné, všechny zobrazené ukázky si můžete stáhnout v příloze této lekce.

V další lekci, Animace efektů při interakci s elementy (tooltip), si ukážeme, jak se dají měnit elementy, když je uživatel například překryje kurzorem myši.


 

Stáhnout

Staženo 31x (1.12 kB)

 

Předchozí článek
Úvod do animací elementů pomocí CSS3
Všechny články v sekci
CSS3
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
1 hlasů
Aktivity (7)

 

 

Komentáře

Avatar
Petr Hank
Člen
Avatar
Petr Hank:31. srpna 19:22

Moc díky za supr kurz moderního využití css3 :)

Odpovědět
31. srpna 19:22
Everytime you turn on the news they try to tell you life is shit. Don't believe it, life is beautiful.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.