Kaskádové styly (CSS) urazily od svého počátku dlouhou cestu. Díky neustálému vývoji a zdokonalování tohoto jazyka existují věci, které jsou možné pouze s CSS, a o kterých možná ani nevíte.
Jedním z nejvýznamnějších pokroků v CSS je vznik a zdokonalení funkcí, které výrazně rozšířily možnosti a sílu stylizace webového obsahu.
Co je to efekt psacího stroje?
Efekt psacího stroje je technika animace textu, která simuluje proces postupného odhalování obsahu, napodobující akt psaní před očima diváka. Tento efekt evokuje staré psací stroje, rané počítačové terminály nebo rozhraní příkazového řádku (CLI).
Postupný výskyt textu přidává prvek napětí a zvědavosti, nutí diváky věnovat zvýšenou pozornost rozvíjejícímu se sdělení.
Jak funguje funkce CSS steps()?
Funkce v CSS přinášejí úroveň flexibility, které bylo dříve obtížné dosáhnout pouze pomocí statických stylů. Funkce `steps()` je oblíbená volba, kterou využíváme v animacích CSS. Díky ní se animace zdají postupovat v oddělených, diskrétních krocích, místo aby plynule přecházely.
`steps()` je funkce časování animace, která akceptuje dva parametry. První parametr určuje počet kroků, které má animace provést. Druhý parametr definuje chování každého kroku. Syntaxe funkce `steps()` vypadá následovně:
animation-timing-function: steps(n, direction)
V uvedeném bloku kódu má funkce `steps()` dva parametry: `n` a `direction`. Parametr `direction` může mít hodnotu `start` nebo `end`.
Nastavení směru na `start` zajistí, že se první krok provede okamžitě po spuštění animace. Nastavení směru na `end` spustí poslední krok po dokončení animace. Pro ilustraci významu funkce `steps()` se podívejte na následující HTML kód:
<div class="container">
<div></div>
</div>
Výše uvedený blok kódu definuje kontejner `div` s podřízeným `div`. Pokud chcete, aby se podřízený `div` klouzal po obrazovce, použijte CSS animace následujícím způsobem:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Výše uvedený blok kódu využívá pravidlo `@keyframes` k definování animace s názvem `movebox`. Tato animace je následně aplikována na podřízený `div`, což způsobí, že se hladce pohybuje po obrazovce v nekonečné smyčce.
Pokud se vám nelíbí plynulá animace a chcete dosáhnout „trhaného“ efektu, můžete použít funkci `steps()` takto:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Jak můžete vidět na GIFu níže, začlenění funkce `steps()` s hodnotou parametru 10 animuje podřízený `div` v krocích namísto plynulé animace. Čím vyšší je počet kroků, tím méně trhaná bude vaše animace.
V uvedeném příkladu je uveden parametr `direction`. Pokud však směr vynecháte, prohlížeč použije jako výchozí hodnotu pro směr `end`.
Vytvoření efektu psacího stroje
Nyní, když jste pochopili, jak funguje funkce `steps()`, je čas uvést vše, co jste se naučili, do praxe. Vytvořte novou složku a pojmenujte ji. Do této složky přidejte soubor `index.htm` pro značení a soubor `style.css` pro úpravu stylů.
Do souboru `index.htm` přidejte následující standardní kód:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
Výše uvedený blok kódu definuje značení pro jednoduchou webovou stránku HTML. Existuje kontejner `div`, který obsahuje další `div` s nějakým fiktivním textem.
Animace textu
Otevřete soubor `styles.css` a nastavte šířku kontejneru `div` na šířku jeho obsahu.
.container{
width: fit-content;
}
Dále pomocí pravidla `@keyframes` definujte animaci, která řídí průběh animace v čase. Nastavte šířku na „0 %“ při 0 %. Na 100 % nastavte šířku na „100 %“ takto:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Dále vyberte prvek s textem třídy a nastavte vlastnost přetečení na skryté. Tímto způsobem zajistíte, že text zůstane skrytý, dokud nezačne efekt psaní. Poté se ujistěte, že text zůstane na jednom řádku, nastavením vlastnosti `whitespace` na `nowrap`. Dejte textové třídě jednoprostorové písmo a přidejte zelené svislé ohraničení napravo od textu.
Toto ohraničení bude fungovat jako kurzor. Nastavte vhodnou velikost písma a vlastnost animace na `type-text`. Nakonec přidejte funkci `steps()` k funkci `animation-timing-`.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
Když spustíte kód v prohlížeči, měli byste vidět následující:
Pokud chcete delší efekt psaní, můžete upravit dobu trvání animace a počet kroků zadaný ve funkci `steps()`.
Oživení kurzoru
Efekt psacího stroje je téměř kompletní, i když chybí jedna funkce, a to blikající kurzor. Připomeňme, že v posledním bloku kódu bylo na textu nastaveno pravé ohraničení, které slouží jako kurzor. K tomuto kurzoru můžete přidat animaci pomocí pravidla `@keyframes`.
@keyframes cursor-blink {
0% {
border-color: transparent;
} 100% {
border-color: green;
}
}
Po definování vlastní animace přidejte název animace do vlastnosti animace na třídě text a nastavte dobu trvání na 0,6 sekundy.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Nyní, když spustíte kód, měli byste vidět blikající kurzor.
Síla funkcí CSS
Funkce CSS způsobily revoluci ve způsobu vytváření webových stránek a nabízejí vám jako vývojářům pozoruhodnou sadu nástrojů. Tyto všestranné funkce umožňují dynamický styl a interakce, které byly kdysi vyhrazeny pro složité skriptovací jazyky.
Od manipulace s barvami po responzivní rozvržení, animace a kreativní transformace, funkce CSS rozšířily možnosti webového designu. S funkcemi jako `calc()` pro flexibilní výpočty, `linear-gradient()` pro působivá pozadí a `translate()` pro strhující animace můžete vytvářet vizuálně přitažlivá a poutavá uživatelská prostředí.