K vytvoření efektu klasického psacího stroje nepotřebujete JavaScript. Naučte se, jak to udělat pouze pomocí CSS pomocí funkce steps().

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.

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á oldschoolové psací stroje, rané počítačové terminály, popř 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ů. The

instagram viewer
kroky() funkce 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.

kroky() 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 pro kroky() funkce vypadají takto:

animation-timing-function: steps(n, direction)

Ve výše uvedeném bloku kódu je kroky() funkce má dva parametry a to: n a směr. The směr Parametr může být buď Start nebo konec.

Nastavení směr na Start zajišťuje, že první krok je dokončen ihned po spuštění animace. Vzhledem k tomu, nastavení směr na konec po dokončení animace spustí poslední krok. Pro ilustraci důležitosti kroky() funkce, podívejte se na následující HTML kód:

<divclass="container">
<div>div>
div>

Výše uvedený blok kódu definuje a kontejner div s dítětem 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 4sinfinite;
}
@keyframes movebox {
 100% {
transform: translateX(100vw);
 }
}

Výše uvedený blok kódu využívá @keyframes pravidlo pro definování animace jmenoval 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.

přes GIPHY

Pokud nemáte rádi plynulou animaci a chcete dosáhnout "trhaného" efektu, můžete využít kroky() fungovat takto:

div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}

Jak můžete vidět na GIFu níže, který obsahuje kroky() funkce s hodnotou parametru 10 bude animovat podřízený prvek div v krocích namísto plynulé animace. Čím vyšší počet kroků, tím méně trhaně bude vaše animace vypadat.

přes GIPHY

Ve výše uvedeném příkladu je směr je uveden parametr. Pokud však vynecháte směr, prohlížeč použije konec jako výchozí hodnota pro směr.

Vytvoření efektu psacího stroje

Nyní, když chápete, jak kroky() funkce funguje, je čas uvést vše, co jste se naučili, do praxe. Vytvořte novou složku a pojmenujte ji. V této složce přidejte soubor index.htm soubor pro označení a styl.css soubor pro styling.

V index.htm soubor, přidejte následující standardní kód:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="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 a jednoduchý HTML web. Tady je kontejner div, který obsahuje další div s nějakým fiktivním textem.

Animace textu

Otevři styly.css souboru a nastavte šířku souboru kontejner div na šířku jeho obsahu.

.container{
width: fit-content;
}

Dále pomocí @klíčové snímky definujte animaci, která řídí postup animace v čase. Nastavte šířku na „0 %“. 0%. Na 100%, nastavte šířku na "100 %" takto:

@keyframes type-text {
 0% {
width: 0%;
 }
 100% {
width: 100%;
 }
}

Dále vyberte prvek s názvem třídy text a nastavte přetékat majetek do 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 mezery majetek do nowrap. Dát text třída jednoprostorové písmo a přidejte zelené svislé ohraničení napravo od textu.

Toto ohraničení bude vypadat jako kurzor. Nastavte vhodné velikost písma a animace majetek do typ-text. Nakonec přidejte kroky() funkce k funkce animace-časování.

.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}

Když spustíte kód v prohlížeči, měli byste vidět toto:

přes GIPHY

Pokud chcete delší efekt psaní, můžete upravit dobu trvání animace a počet kroků zadaný v kroky() funkce.

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í @klíčové snímky vládnout také.

@keyframes cursor-blink {
 0% {
border-color: transparent;
 }
 100% {
border-color: green;
 }
}

Po definování vlastní animace přidejte název animace do animace nemovitost na text třídy a nastavte dobu trvání na 0,6 sekundy.

.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}

Nyní, když spustíte kód, měli byste vidět blikající kurzor.

přes GIPHY

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 vytvořit vizuálně přitažlivého a poutavého uživatele zkušenosti.