Nu aveți nevoie de JavaScript pentru a crea efectul clasic de mașină de scris. Aflați cum să o faceți doar cu CSS folosind funcția steps().
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.
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 calculator timpurii sau Interfețe 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. The pași() funcția 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.
pași() este o funcție de sincronizare a animației care preia 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 pași() funcțiile arată astfel:
animation-timing-function: steps(n, direction)
În blocul de cod de mai sus, pași() Funcția are doi parametri și anume: n și direcţie. The direcţie parametrul poate fi fie start sau Sfârşit.
Setarea direcţie la start se asigură că primul pas este finalizat imediat ce începe animația. Întrucât, setarea direcţie la Sfârşit va rula ultimul pas pe măsură ce animația se termină. Pentru a ilustra importanța pași() funcție, aruncați o privire la următorul cod HTML:
<divclass="container">
<div>div>
div>
Blocul de cod de mai sus definește a recipient div cu un copil div. 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 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Blocul de cod de mai sus utilizează @keyframes regula pentru a defini o animație numit caseta de mutare. 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ă.
prin GIPHY
Dacă nu vă place animația netedă și doriți să obțineți un efect „încurcat”, puteți utiliza pași() functioneaza astfel:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
După cum puteți vedea în GIF de mai jos, încorporând pași() funcția 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ă.
prin GIPHY
În exemplul de mai sus, direcţie este furnizat parametrul. Cu toate acestea, dacă omiteți direcţie, browserul va folosi Sfârşit ca valoare implicită pentru direcţie.
Crearea efectului de mașină de scris
Acum că înțelegi cum pași() funcția funcționează, 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 index.htm fișier pentru marcare și a stil.css dosar pentru styling.
În index.htm fișier, adăugați următorul cod boilerplate:
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>Blocul de cod de mai sus definește marcajul pentru a site HTML simplu. Este un recipient div care deține un alt div cu un text fals.
Animarea textului
Deschide stiluri.css fișier și setați lățimea recipient div la lățimea conținutului său.
.container{
width: fit-content;
}
Apoi, folosind @keyframes regula, 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 numele clasei text și setați revărsare proprietate 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 faceți asta, asigurați-vă că textul rămâne pe o singură linie setând spatiu alb proprietate la nowrap. Dă-le text clasificați un font monospațiu și adăugați un chenar vertical verde în dreapta textului.
Acest chenar va da aspectul unui cursor. Setați cea potrivită marimea fontului si animaţie proprietate la tip-text. În cele din urmă, adăugați pași() funcţie la animatie-functie-sincronizare.
.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);
}
Când rulați codul în browser, iată ce ar trebui să vedeți:
prin GIPHY
Dacă doriți un efect de tastare mai lung, puteți ajusta durata animației și numărul de pași specificat în pași() funcţie.
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 @keyframes regula de asemenea.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
După ce definiți animația personalizată, adăugați numele animației la animaţie proprietate de pe text clasa și setați durata la 0,6 secunde.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Acum, când rulați codul, ar trebui să vedeți un cursor care clipește.
prin GIPHY
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 un utilizator atrăgător și captivant din punct de vedere vizual experiențe.
