Cascading Style Sheets (CSS) urazily od svého vzniku dlouhou cestu. Jsou věci, které jsou možné jen s CSS, o kterých možná nevíte, díky neustálému vývoji a vylepšování jazyka.
Jedním z nejpozoruhodnějších pokroků v CSS je vznik a zdokonalení funkcí CSS, které výrazně rozšířily možnosti a sílu stylování webového obsahu.
Table of Contents
Jaký je efekt psacího stroje?
Efekt psacího stroje je technika animace textu, která simuluje proces postupného odhalování obsahu a napodobuje akt psaní, jak se odehrává před očima diváka. Tento efekt připomíná 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 intrik, vybízí diváky, aby věnovali velkou pozornost odvíjejícímu se sdělení.
Jak funguje funkce CSS steps().
Funkce v CSS zavádějí úroveň flexibility, které bylo dříve obtížné dosáhnout pouze pomocí statických stylů. Funkce steps() je oblíbená funkce, která se používá v animacích CSS. Díky tomu animace vypadají, jako by postupovaly v odlišných, diskrétních krocích, místo aby plynule přecházely.
steps() je funkce časování animace, která přebírá dva parametry. První parametr udává počet kroků, které má vaše animace provést. Druhý parametr definuje chování každého kroku. Syntaxe funkcí steps() vypadá takto:
animation-timing-function: steps(n, direction)
Ve výše uvedeném bloku kódu má funkce steps() dva parametry, konkrétně: n a direction. Parametr směru může být začátek nebo konec.
Nastavení směru spuštění zajistí, že první krok bude dokončen ihned po spuštění animace. Zatímco nastavení směru na konec spustí poslední krok po dokončení animace. Pro ilustraci důležitosti funkce steps() se podívejte na následující HTML kód:
<div class="container">
<div></div>
</div>
Blok kódu výše definuje kontejner div s podřízeným div. Pokud chcete, aby podřízený div klouzal po obrazovce, použijte animace CSS takto:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Blok kódu výše využívá pravidlo @keyframes k definování animace s názvem movebox. Tato animace je poté aplikována na podřízený div, což způsobí, že se hladce pohybuje po obrazovce v nekonečné smyčce.
Pokud nemáte rádi plynulou animaci 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 bude animovat podřízený div v krocích namísto hladké animace. Čím vyšší počet kroků, tím méně trhaně bude vaše animace vypadat.
Ve výše uvedeném příkladu je poskytnut 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 funkce steps() funguje, 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 označ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 označení pro jednoduchý web 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 názvu 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 vypadat jako kurzor. Nastavte vhodnou velikost písma a vlastnost animace na typ textu. 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 toto:
Pokud chcete delší efekt psaní, můžete upravit dobu trvání animace a počet kroků zadaný ve funkci steps().
Přivedení kurzoru k životu
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žilo 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ízí 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 ohromující pozadí a translate() pro podmanivé animace můžete vytvářet vizuálně přitažlivé a poutavé uživatelské prostředí.