Cascading Style Sheets (CSS) a parcurs un drum lung de la începuturile sale. Există lucruri care sunt posibile doar cu CSS despre care poate nu le cunoașteți, datorită evoluției și îmbunătățirii continue a limbajului.
Una dintre cele mai notabile progrese în CSS este apariția și rafinarea funcțiilor CSS, care au extins semnificativ capacitățile și puterea de a stila conținutul web.
Cuprins
Ce este efectul de mașină de scris?
Efectul de mașină de scris este o tehnică de animație a textului care simulează procesul de dezvăluire progresivă a conținutului, mimând actul de tastare pe măsură ce se desfășoară în fața ochilor privitorului. Acest efect amintește de mașinile de scris vechi, terminalele de computer timpurii sau interfețele de linie de comandă (CLI).
Apariția treptată a textului adaugă un element de suspans și intriga, încurajând publicul să acorde o atenție deosebită mesajului care se desfășoară.
Cum funcționează funcția CSS steps().
Funcțiile din CSS introduc un nivel de flexibilitate care anterior era dificil de atins folosind doar stilurile statice. Funcția steps() este o funcție populară care este utilizată în animațiile CSS. Face ca animațiile să pară că avansează în pași distincti, discreti, în loc să treacă fără probleme.
steps() este o funcție de sincronizare a animației care ia doi parametri. Primul parametru indică numărul de pași pe care doriți să-i facă animația. Al doilea parametru definește comportamentul fiecărui pas. Sintaxa pentru funcțiile steps() arată astfel:
animation-timing-function: steps(n, direction)
În blocul de cod de mai sus, funcția steps() are doi parametri și anume: n și direcția. Parametrul de direcție poate fi început sau sfârșit.
Setarea direcției de pornire asigură că primul pas este finalizat de îndată ce începe animația. În timp ce, setarea direcției de sfârșit va rula ultimul pas pe măsură ce animația se termină. Pentru a ilustra importanța funcției steps(), aruncați o privire la următorul cod HTML:
<div class="container">
<div></div>
</div>
Blocul de cod de mai sus definește un div container cu un div copil. Dacă doriți ca div-ul copil să alunece pe ecran, utilizați animații CSS astfel:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Blocul de cod 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 miște fără probleme pe ecran într-o buclă infinită.
Dacă nu vă place animația netedă și doriți să obțineți un efect „încurcat”, puteți utiliza funcția steps() astfel:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
După cum puteți vedea în GIF-ul de mai jos, încorporarea funcției steps() cu o valoare a parametrului 10 va anima div-ul copil în pași în loc de animație lină. Cu cât numărul de pași este mai mare, cu atât animația ta va arăta mai puțin agitată.
În exemplul de mai sus, este furnizat parametrul de direcție. Cu toate acestea, dacă omiteți direcția, browserul va folosi 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 timpul să puneți în practică tot ce ați învățat. Creați un folder nou și dați-i un nume adecvat. În acel folder, adăugați un fișier index.htm pentru marcare și un fișier style.css pentru stil.
În fișierul index.htm, adăugați următorul cod boilerplate:
<!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>
Blocul de cod de mai sus definește marcajul pentru un site web HTML simplu. Există un container div care deține un alt div cu un text fals.
Animarea textului
Deschideți fișierul styles.css și setați lățimea div-ului containerului la lățimea conținutului său.
.container{
width: fit-content;
}
Apoi, folosind 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%” astfel:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Apoi, selectați elementul cu textul numelui clasei și setați proprietatea de overflow la ascuns. Făcând acest lucru, vă veți asigura că textul rămâne ascuns atâta timp cât efectul de tastare nu a început. După ce ați făcut asta, asigurați-vă că textul rămâne pe o singură linie setând proprietatea spațiilor albe la nowrap. Dați clasei de text un font monospațiu și adăugați un chenar vertical verde în dreapta textului.
Acest chenar va da aspectul unui cursor. Setați dimensiunea adecvată a fontului și proprietatea de animație la tip text. În cele din urmă, adăugați funcția steps() la funcția 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);
}
Când rulați codul în browser, iată ce ar trebui să vedeți:
Dacă doriți un efect de tastare mai lung, puteți ajusta durata animației și numărul de pași specificat în funcția steps().
Aducerea cursorului la viață
Efectul de mașină de scris este aproape complet, deși lipsește o caracteristică, care este cursorul care clipește. Amintiți-vă că în ultimul bloc de cod, un chenar spre dreapta a fost stabilit pe text pentru a servi drept cursor. Puteți adăuga o animație la acest cursor folosind și 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 animației din clasa de text și setați durata la 0,6 secunde.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Acum, când rulați codul, ar trebui să vedeți un cursor care clipește.
Puterea funcțiilor CSS
Funcțiile CSS au revoluționat modul în care sunt construite site-urile web, oferindu-vă un set de instrumente remarcabil pentru dvs. ca dezvoltator. Aceste funcții versatile permit stiluri dinamice și interacțiuni care au fost rezervate cândva pentru limbaje complexe de scripting.
De la manipulări de culoare la machete receptive, animații și transformări creative, funcțiile CSS au extins posibilitățile de web design. Cu funcții precum calc() pentru calcule flexibile, linear-gradient() pentru fundaluri uimitoare și translate() pentru animații captivante, puteți crea experiențe de utilizator atrăgătoare și captivante din punct de vedere vizual.