Kaskadni stilski listovi (CSS) su značajno napredovali od svog nastanka. Postoje mogućnosti koje su izvodljive isključivo pomoću CSS-a, a možda ih niste ni svesni, zahvaljujući stalnom razvoju i usavršavanju ovog jezika.
Jedan od najvažnijih napredaka u CSS-u je pojava i usavršavanje CSS funkcija, koje su znatno proširile kapacitete i moć stilizovanja veb sadržaja.
Šta je efekat pisaće mašine?
Efekat pisaće mašine je tehnika animacije teksta koja imitira proces postepenog otkrivanja sadržaja, simulirajući čin kucanja dok se odvija pred očima posmatrača. Ovaj efekat podseća na stare pisaće mašine, rane računarske terminale ili interfejse komandne linije (CLI).
Postepeno pojavljivanje teksta dodaje dozu neizvesnosti i intrige, motivišući publiku da obrati pažnju na poruku koja se razvija.
Kako funkcioniše funkcija CSS steps()?
Funkcije u CSS-u uvode nivo fleksibilnosti koji je ranije bilo teško postići samo statičkim stilovima. Funkcija `steps()` je popularna funkcija koja se koristi u CSS animacijama. Ona omogućava da animacije izgledaju kao da se kreću u diskretnim, odvojenim koracima, umesto da glatko prelaze.
Funkcija `steps()` je funkcija tajminga animacije koja prihvata dva parametra. Prvi parametar ukazuje na broj koraka koje želite da vaša animacija preduzme. Drugi parametar određuje ponašanje svakog koraka. Sintaksa za funkciju `steps()` je sledeća:
animation-timing-function: steps(n, direction)
U gornjem kodu, funkcija `steps()` ima dva parametra: `n` i `direction`. Parametar `direction` može biti `start` ili `end`.
Postavljanje `direction` na `start` osigurava da se prvi korak izvrši odmah po početku animacije. S druge strane, postavljanje `direction` na `end` će pokrenuti poslednji korak kada se animacija završi. Da bismo ilustrovali značaj funkcije `steps()`, pogledajmo sledeći HTML kod:
<div class="container"> <div></div> </div>
Gornji kod definiše kontejnerski div sa podređenim divom. Ako želite da se podređeni div kreće preko ekrana, možete koristiti CSS animacije kao što je ova:
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Gornji kod koristi pravilo `@keyframes` da definiše animaciju nazvanu `movebox`. Ova animacija se zatim primenjuje na podređeni div, što uzrokuje da se glatko kreće po ekranu u beskonačnoj petlji.
Ako vam se ne sviđa glatka animacija i želite da postignete „isprekidan“ efekat, možete upotrebiti funkciju `steps()` na sledeći način:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Kao što se vidi na GIF-u ispod, uključivanje funkcije `steps()` sa vrednošću parametra 10 će animirati podređeni div u koracima umesto glatke animacije. Što je veći broj koraka, to će vaša animacija izgledati manje isprekidano.
U gornjem primeru je naveden parametar `direction`. Međutim, ako izostavite smer, pretraživač će koristiti `end` kao podrazumevanu vrednost za smer.
Kreiranje efekta pisaće mašine
Sada kada razumete kako funkcioniše funkcija `steps()`, vreme je da sve što ste naučili primenite u praksi. Napravite novi folder i dajte mu odgovarajuće ime. U taj folder dodajte datoteku `index.html` za označavanje i `style.css` datoteku za stilizovanje.
U datoteci `index.html` dodajte sledeći šablonski kod:
<!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>
Gornji kod definiše oznake za jednostavnu HTML veb lokaciju. Postoji kontejner `div` koji sadrži drugi `div` sa nekim lažnim tekstom.
Animiranje teksta
Otvorite datoteku `styles.css` i podesite širinu kontejnera `div` na širinu njegovog sadržaja.
.container{
width: fit-content;
}
Zatim, koristeći pravilo `@keyframes`, definišite animaciju koja kontroliše kako animacija napreduje tokom vremena. Podesite širinu na `0%` na 0%. Na 100%, podesite širinu na `100%` ovako:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Zatim izaberite element sa imenom klase `text` i postavite svojstvo prelivanje na skriveno. Ovo će osigurati da tekst ostane skriven sve dok efekat kucanja ne počne. Nakon toga, uverite se da tekst ostaje u jednom redu postavljanjem svojstva `white-space` na `nowrap`. Dodelite klasi `text` `monospace` font i dodajte zelenu vertikalnu ivicu sa desne strane teksta.
Ova ivica će imitirati izgled kursora. Podesite odgovarajuću veličinu fonta i svojstvo animacije na `type-text`. Konačno, dodajte funkciju `steps()` funkciji tajminga animacije.
.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);
}
Kada pokrenete kod u pretraživaču, trebali biste videti sledeće:
Ako želite duži efekat kucanja, možete podesiti trajanje animacije i broj koraka navedenih u funkciji `steps()`.
Oživljavanje kursora
Efekat pisaće mašine je skoro gotov, mada nedostaje jedna važna karakteristika, a to je trepćući kursor. Podsetimo se da je u poslednjem bloku koda postavljena desna ivica na tekstu da posluži kao kursor. Možete dodati animaciju ovom kursoru pomoću pravila `@keyframes`.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Nakon što definišete prilagođenu animaciju, dodajte ime animacije svojstvu animacije u klasi `text` i postavite trajanje na 0,6 sekundi.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Sada kada pokrenete kod, trebalo bi da vidite trepćući kursor.
Moć CSS funkcija
CSS funkcije su transformisale način na koji se veb sajtovi razvijaju, nudeći izvanredan skup alata za vas kao programera. Ove svestrane funkcije omogućavaju dinamičan stil i interakcije koje su nekada bile rezervisane za kompleksnije jezike za skriptovanje.
Od manipulacija bojama do responzivnih rasporeda, animacija i kreativnih transformacija, CSS funkcije su proširile mogućnosti veb dizajna. Sa funkcijama kao što su `calc()` za fleksibilne proračune, `linear-gradient()` za zadivljujuće pozadine i `translate()` za impresivne animacije, možete kreirati vizuelno atraktivna i privlačna korisnička iskustva.