Limbajul Cascading Style Sheets (CSS) a evoluat semnificativ de la apariția sa. Datorită progreselor și îmbunătățirilor continue, există acum o mulțime de posibilități oferite de CSS, despre care poate nu sunteți conștienți.
Unul dintre cele mai notabile avansuri în CSS este dezvoltarea și perfecționarea funcțiilor CSS, care au amplificat considerabil capacitățile și posibilitatea de a stiliza conținutul web.
Ce este efectul de mașină de scris?
Efectul de mașină de scris este o tehnică de animație a textului care simulează afișarea graduală a conținutului, imitând acțiunea de a tasta, pe măsură ce aceasta se desfășoară în fața privitorului. Acest efect aduce aminte de mașinile de scris clasice, terminalele de computer timpurii sau interfețele de linie de comandă (CLI).
Apariția progresivă a textului introduce un element de suspans și curiozitate, încurajând publicul să acorde o atenție sporită mesajului care se dezvoltă.
Cum funcționează funcția CSS steps()?
Funcțiile din CSS oferă un nivel de flexibilitate greu de obținut anterior doar prin utilizarea stilurilor statice. Funcția `steps()` este o funcție populară folosită în animațiile CSS. Aceasta determină ca animațiile să pară că progresează în pași separați, distincți, în loc să se desfășoare fluent.
`steps()` este o funcție de sincronizare a animației care primește doi parametri. Primul parametru indică numărul de pași pe care doriți să-i execute animația. Al doilea parametru definește comportamentul fiecărui pas. Sintaxa funcției `steps()` este următoarea:
animation-timing-function: steps(n, direction)
În exemplul de mai sus, funcția `steps()` are doi parametri, și anume: `n` și `direction` (direcția). Parametrul `direction` poate fi setat fie la `start` (început), fie la `end` (sfârșit).
Setarea direcției la `start` asigură că primul pas este executat imediat ce începe animația. În schimb, setarea direcției la `end` va rula ultimul pas la finalul animației. Pentru a evidenția importanța funcției `steps()`, să analizăm următorul cod HTML:
<div class="container"> <div></div> </div>
Codul de mai sus definește un `div` container cu un `div` copil. Dacă doriți ca div-ul copil să alunece pe ecran, puteți utiliza animații CSS, după cum urmează:
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Codul de mai sus utilizează regula `@keyframes` pentru a defini o animație numită `movebox`. Această animație este apoi aplicată div-ului copil, făcându-l să se deplaseze lin pe ecran într-o buclă infinită.
Dacă nu preferați animația fluidă și doriți să obțineți un efect „întrerupt”, puteți utiliza funcția `steps()` după cum urmează:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
După cum puteți observa în GIF-ul de mai jos, utilizarea funcției `steps()` cu o valoare a parametrului 10 va anima div-ul copil în pași, în loc de o animație lină. Cu cât numărul de pași este mai mare, cu atât animația va arăta mai puțin „sacadată”.
În exemplul de mai sus, parametrul de direcție este specificat. Cu toate acestea, dacă omiteți direcția, browserul va utiliza `end` ca valoare implicită pentru direcție.
Crearea efectului de mașină de scris
Acum că înțelegeți cum funcționează funcția `steps()`, este momentul să puneți în practică cele învățate. Creați un folder nou și dați-i un nume relevant. În interiorul acestui folder, adăugați un fișier `index.htm` pentru marcaj și un fișier `style.css` pentru stilizare.
În fișierul `index.htm`, adăugați următorul cod standard:
<!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>
Codul de mai sus definește marcajul pentru un site web HTML simplu. Acesta conține un `div` container care include un alt `div` cu un text fictiv.
Animarea textului
Deschideți fișierul `styles.css` și setați lățimea div-ului container la lățimea conținutului său.
.container{
width: fit-content;
}
Apoi, utilizând regula `@keyframes`, definiți o animație care controlează modul în care animația progresează în timp. Setați lățimea la „0%” la 0%. La 100%, setați lățimea la „100%”, după cum urmează:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
În continuare, selectați elementul cu clasa `text` și setați proprietatea `overflow` la `hidden`. Acest lucru va asigura că textul va rămâne ascuns până când efectul de tastare va începe. După ce ați făcut acest lucru, asigurați-vă că textul rămâne pe o singură linie setând proprietatea `white-space` la `nowrap`. Adăugați clasei `text` un font monospațiu și un chenar vertical verde în partea dreaptă a textului.
Acest chenar va da impresia unui cursor. Setați dimensiunea corespunzătoare a fontului și proprietatea `animation` la `type-text`. În final, adăugați funcția `steps()` la proprietatea `animation-timing-function`.
.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);
}
Când executați codul în browser, ar trebui să vedeți următorul rezultat:
Dacă doriți un efect de tastare mai îndelungat, puteți ajusta durata animației și numărul de pași specificat în funcția `steps()`.
Animarea cursorului
Efectul de mașină de scris este aproape finalizat, însă îi lipsește o caracteristică, anume cursorul care clipește. Vă reamintim că în ultimul bloc de cod, am adăugat un chenar în partea dreaptă a textului, pentru a servi drept cursor. Puteți adăuga o animație acestui cursor folosind, de asemenea, regula `@keyframes`.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
După definirea animației personalizate, adăugați numele animației la proprietatea `animation` din clasa `text` și setați durata la 0.6 secunde.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Acum, când executați codul, veți vedea un cursor care clipește.
Puterea funcțiilor CSS
Funcțiile CSS au revoluționat modul în care sunt create site-urile web, oferindu-vă, ca dezvoltator, o gamă de instrumente remarcabilă. Aceste funcții versatile permit stiluri dinamice și interacțiuni care anterior erau rezervate limbajelor complexe de scripting.
De la manipulări de culoare la machete adaptive, animații și transformări creative, funcțiile CSS au extins posibilitățile designului web. Cu funcții precum `calc()` pentru calcule flexibile, `linear-gradient()` pentru fundaluri impresionante și `translate()` pentru animații atractive, puteți crea experiențe vizuale captivante și interactive pentru utilizatori.