Ne trebate JavaScript za stvaranje efekta klasičnog pisaćeg stroja. Naučite kako to učiniti samo pomoću CSS-a pomoću funkcije steps().
Cascading Style Sheets (CSS) prešao je dug put od svog početka. Postoje stvari koje su moguće uz samo CSS, a za koje možda niste znali, zahvaljujući kontinuiranoj evoluciji i poboljšanju jezika.
Jedan od najznačajnijih napredaka u CSS-u je pojava i usavršavanje CSS funkcija, koje su značajno proširile mogućnosti i snagu oblikovanja web sadržaja.
Što je efekt pisaćeg stroja?
Efekt pisaćeg stroja je tehnika animacije teksta koja simulira proces postupnog otkrivanja sadržaja, oponašajući čin tipkanja dok se odvija pred očima gledatelja. Ovaj učinak podsjeća na stare pisaće strojeve, rane računalne terminale ili Sučelja naredbenog retka (CLI).
Postupno pojavljivanje teksta dodaje element napetosti i intrige, potičući publiku da obrati pozornost na poruku koja se razvija.
Kako funkcionira CSS funkcija steps().
Funkcije u CSS-u uvode razinu fleksibilnosti koju je prije bilo teško postići korištenjem samih statičkih stilova. The
koraci() funkcija je popularna funkcija koja se koristi u CSS animacijama. To čini da animacije izgledaju kao da napreduju u različitim, diskretnim koracima umjesto glatkog prijelaza.koraci() je funkcija mjerenja vremena animacije koja uzima dva parametra. Prvi parametar označava broj koraka koje želite da vaša animacija napravi. Drugi parametar definira ponašanje svakog koraka. Sintaksa za koraci() funkcije izgleda ovako:
animation-timing-function: steps(n, direction)
U gornjem bloku koda, koraci() funkcija ima dva parametra i to: n i smjer. The smjer parametar može biti ili početak ili kraj.
Postavljanje smjer do početak osigurava da je prvi korak dovršen čim animacija započne. Dok, postavljanje smjer do kraj pokrenut će posljednji korak kada animacija završi. Kako bismo ilustrirali važnost koraci() funkciju, pogledajte sljedeći HTML kod:
<divclass="container">
<div>div>
div>
Gore navedeni blok koda definira a spremnik div s djetetom div. Ako želite da dijete div klizi preko zaslona, koristite CSS animacije poput ove:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Gornji blok koda koristi @keyframes pravilo za definiranje animacije imenovani kutija za pomicanje. Ta se animacija zatim primjenjuje na dijete div, uzrokujući njegovo glatko kretanje po zaslonu u beskonačnoj petlji.
putem GIPHY
Ako ne volite glatku animaciju i želite postići "isprekidan" efekt, možete upotrijebiti koraci() funkcionirati ovako:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Kao što možete vidjeti u GIF-u u nastavku, koji uključuje koraci() funkcija s vrijednošću parametra 10 animirat će dijete div u koracima umjesto glatke animacije. Što je veći broj koraka, to će vaša animacija izgledati manje isprekidano.
putem GIPHY
U gornjem primjeru, smjer parametar je osiguran. Međutim, ako izostavite smjer, koristit će preglednik kraj kao zadana vrijednost za smjer.
Stvaranje efekta pisaćeg stroja
Sada kada razumijete kako koraci() funkcionira, vrijeme je da sve što ste naučili primijenite u praksi. Napravite novu mapu i dajte joj odgovarajući naziv. U toj mapi dodajte indeks.htm datoteka za označavanje i a stil.css turpija za stiliziranje.
u indeks.htm datoteku, dodajte sljedeći šablonski kod:
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>Gornji blok koda definira oznaku za a jednostavno HTML web mjesto. Tamo je spremnik div koji sadrži drugi div s nekim lažnim tekstom.
Animiranje teksta
Otvori stilovi.css datoteku i postavite širinu spremnik div na širinu svog sadržaja.
.container{
width: fit-content;
}
Zatim, koristeći @ključni okviri pravilo, definirajte animaciju koja kontrolira kako animacija napreduje tijekom vremena. Postavite širinu na "0%" na 0%. Na 100%, postavite širinu na "100%" ovako:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Zatim odaberite element s nazivom klase tekst i postavite prelijevanje vlasništvo na skriven. Time ćete osigurati da tekst ostane skriven sve dok se ne pokrene učinak tipkanja. Nakon što to učinite, osigurajte da tekst ostane u jednom retku postavljanjem bijeli prostor vlasništvo na Nowrap. Daj tekst klasificirajte monospace font i dodajte zeleni okomiti obrub s desne strane teksta.
Ova granica će dati izgled pokazivača. Postavite odgovarajuće veličina fonta i animacija vlasništvo na tip-tekst. Na kraju dodajte koraci() funkcija za funkcija mjerenja vremena animacije.
.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);
}
Kada pokrenete kod u pregledniku, ovo je ono što biste trebali vidjeti:
putem GIPHY
Ako želite dulji učinak tipkanja, možete prilagoditi trajanje animacije i broj koraka navedenih u koraci() funkcija.
Oživljavanje kursora
Efekt pisaćeg stroja je gotovo potpun, iako jedna značajka nedostaje, a to je trepćući kursor. Podsjetimo se da je u posljednjem bloku koda na tekst postavljena desna granica koja služi kao kursor. Ovom kursoru možete dodati animaciju pomoću @ključni okviri pravilo također.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Nakon definiranja prilagođene animacije, dodajte naziv animacije u animacija vlasništvo na tekst klase i postavite trajanje na 0,6 sekundi.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Sada kada pokrenete kod, trebali biste vidjeti trepćući kursor.
putem GIPHY
Snaga CSS funkcija
CSS funkcije revolucionirale su način na koji se izrađuju web stranice, nudeći izvanredan alat za vas kao programera. Ove svestrane funkcije omogućuju dinamičan stil i interakcije koje su nekad bile rezervirane za složene skriptne jezike.
Od manipulacije bojama do responzivnih izgleda, animacija i kreativnih transformacija, CSS funkcije proširile su mogućnosti web dizajna. S funkcijama kao što su calc() za fleksibilne izračune, linear-gradient() za zapanjujuće pozadine i translate() za zadivljujuće animacije, možete izraditi vizualno privlačne i privlačne korisnike iskustva.