Du trenger ikke JavaScript for å lage den klassiske skrivemaskineffekten. Lær hvordan du gjør det med bare CSS ved å bruke steps()-funksjonen.
Cascading Style Sheets (CSS) har kommet langt siden starten. Det er ting som er mulig med bare CSS som du kanskje ikke vet om, takket være den kontinuerlige utviklingen og forbedringen av språket.
En av de mest bemerkelsesverdige fremskrittene innen CSS er fremveksten og foredlingen av CSS-funksjoner, som har utvidet mulighetene og kraften til styling av webinnhold betydelig.
Hva er skrivemaskineffekten?
Skrivemaskineffekten er en tekstanimasjonsteknikk som simulerer prosessen med at innhold blir avduket gradvis, og etterligner skrivehandlingen mens det utspiller seg foran seerens øyne. Denne effekten minner om gamle skrivemaskiner, tidlige dataterminaler eller Kommandolinjegrensesnitt (CLI-er).
Den gradvise fremtoningen av teksten tilfører et element av spenning og intriger, og oppmuntrer publikum til å følge nøye med på budskapet som utspiller seg.
Hvordan CSS steps() funksjonen fungerer
Funksjoner i CSS introduserer et nivå av fleksibilitet som tidligere var utfordrende å oppnå ved bruk av statiske stiler alene. De trinn() funksjon er en populær funksjon som brukes i CSS-animasjoner. Det får animasjoner til å se ut som om de går videre i distinkte, diskrete trinn i stedet for jevn overgang.
trinn() er en animasjonstidsfunksjon som tar inn to parametere. Den første parameteren angir antall trinn du vil at animasjonen skal ta. Den andre parameteren definerer oppførselen til hvert trinn. Syntaksen for trinn() funksjonene ser slik ut:
animation-timing-function: steps(n, direction)
I kodeblokken ovenfor vises trinn() funksjonen har to parametere, nemlig: n og retning. De retning parameter kan enten være start eller slutt.
Innstilling av retning til start sikrer at det første trinnet fullføres så snart animasjonen starter. Mens innstilling av retning til slutt vil kjøre det siste trinnet når animasjonen er ferdig. For å illustrere viktigheten av trinn() funksjon, ta en titt på følgende HTML-kode:
<divclass="container">
<div>div>
div>
Kodeblokken ovenfor definerer en container div med et barn div. Hvis du vil at barnedivisjonen skal gli over skjermen, bruker du CSS-animasjoner som dette:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Kodeblokken ovenfor bruker @keyframes-regel for å definere en animasjon navngitt flytteboks. Denne animasjonen blir deretter brukt på underordnet div, og får den til å bevege seg jevnt over skjermen i en uendelig sløyfe.
via GIPHY
Hvis du ikke liker jevn animasjon og ønsker å oppnå en "hakkete" effekt, kan du benytte deg av trinn() fungerer slik:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Som du kan se i GIF-en nedenfor, inkluderer trinn() funksjon med en parameterverdi på 10 vil animere underordnet div i trinn i stedet for jevn animasjon. Jo høyere antall trinn, desto mindre hakkete vil animasjonen din se ut.
via GIPHY
I eksemplet ovenfor er retning parameter er gitt. Men hvis du utelater retning, vil nettleseren bruke slutt som standardverdi for retning.
Opprette skrivemaskineffekten
Nå som du forstår hvordan trinn() funksjonen fungerer, er det på tide å sette alt du har lært ut i praksis. Opprett en ny mappe, og gi den et passende navn. I den mappen legger du til en index.htm fil for markering og en style.css fil for styling.
I index.htm fil, legg til følgende standardkode:
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>Kodeblokken ovenfor definerer markeringen for en enkel HTML-nettside. Det er en container div som inneholder en annen div med litt dummy-tekst.
Animering av teksten
Åpne styles.css fil og angi bredden på container div til bredden av innholdet.
.container{
width: fit-content;
}
Deretter bruker du @keyframes regel, definere en animasjon som kontrollerer hvordan animasjonen utvikler seg over tid. Sett bredden til "0%" ved 0%. På 100%, sett bredden til "100%" slik:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Deretter velger du elementet med klassenavnet tekst og still inn flyte eiendom til skjult. Å gjøre dette vil sørge for at teksten forblir skjult så lenge skriveeffekten ikke har startet. Etter å ha gjort det, sørg for at teksten forblir på én linje ved å angi mellomrom eiendom til nowrap. Gi tekst klassifisere en monospace-font og legg til en grønn vertikal kant til høyre for teksten.
Denne grensen vil gi utseendet til en markør. Still inn passende skriftstørrelse og animasjon eiendom til skriv-tekst. Til slutt legger du til trinn() funksjon til animasjon-timing-funksjon.
.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);
}
Når du kjører koden i nettleseren, bør du se dette:
via GIPHY
Hvis du vil ha en lengre skriveeffekt, kan du justere animasjonens varighet og antall trinn spesifisert i trinn() funksjon.
Gjør markøren til live
Skrivemaskineffekten er nesten fullført, selv om det mangler en funksjon, som er den blinkende markøren. Husk at i den siste kodeblokken ble en høyrekant satt på teksten for å tjene som markøren. Du kan legge til en animasjon til denne markøren ved å bruke @keyframes styre også.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Etter å ha definert den tilpassede animasjonen, legg til animasjonsnavnet til animasjon eiendom på tekst klasse og sett varigheten til 0,6 sekunder.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Nå når du kjører koden, bør du se en blinkende markør.
via GIPHY
Kraften til CSS-funksjoner
CSS-funksjoner har revolusjonert måten nettsteder bygges på, og tilbyr et bemerkelsesverdig verktøysett for deg som utvikler. Disse allsidige funksjonene muliggjør dynamisk styling og interaksjoner som en gang var reservert for komplekse skriptspråk.
Fra fargemanipulasjoner til responsive layouter, animasjoner og kreative transformasjoner, CSS-funksjoner har utvidet mulighetene for webdesign. Med funksjoner som calc() for fleksible beregninger, linear-gradient() for fantastiske bakgrunner og translate() for fengslende animasjoner, kan du lage en visuelt tiltalende og engasjerende bruker opplevelser.
