Cascading Style Sheets (CSS) har utviklet seg betydelig siden starten. Takket være kontinuerlig utvikling og forbedring av språket, er det nå mulig å oppnå ting med bare CSS som kanskje er ukjente for mange.
En av de mest betydelige fremskrittene i CSS er veksten og foredlingen av CSS-funksjoner. Disse har i stor grad utvidet mulighetene og styrken ved å style webinnhold.
Hva er skrivemaskineffekten?
Skrivemaskineffekten er en teknikk for tekstanimasjon. Den simulerer prosessen der innholdet gradvis avsløres, og etterligner skrivebevegelsen mens den utfolder seg foran betrakterens øyne. Denne effekten minner om de gamle skrivemaskinene, tidlige dataterminaler eller kommandolinjegrensesnitt (CLI).
Den trinnvise fremvisningen av teksten tilfører en følelse av spenning og nysgjerrighet, og oppfordrer publikum til å følge nøye med på meldingen som utvikler seg.
Hvordan fungerer CSS steps() funksjonen?
Funksjoner i CSS gir en fleksibilitet som tidligere var vanskelig å oppnå kun ved bruk av statiske stiler. `steps()`-funksjonen er en populær funksjon som brukes i CSS-animasjoner. Den får animasjoner til å se ut som om de beveger seg i distinkte, separate trinn istedenfor en jevn overgang.
`steps()` er en funksjon for animasjonstidsberegning som tar to parametere. Den første parameteren spesifiserer hvor mange trinn animasjonen skal ta. Den andre parameteren bestemmer oppførselen til hvert trinn. Syntaksen for `steps()`-funksjonen ser slik ut:
animation-timing-function: steps(n, direction)
I kodeblokken ovenfor har `steps()`-funksjonen to parametere: `n` og `direction`. Retningsparameteren kan være enten `start` eller `end`.
Å angi `start`-retningen sørger for at det første trinnet fullføres så snart animasjonen starter. Ved å sette retningen til `end` vil derimot det siste trinnet utføres når animasjonen er ferdig. For å illustrere viktigheten av `steps()`-funksjonen, se på følgende HTML-kode:
<div class="container">
<div></div>
</div>
Kodeblokken ovenfor definerer en container-div med en underordnet div. Hvis du vil at den underordnede div’en skal gli over skjermen, kan du bruke CSS-animasjoner slik:
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Kodeblokken ovenfor bruker `@keyframes`-regelen for å definere en animasjon kalt `movebox`. Denne animasjonen blir deretter brukt på den underordnede div’en, og får den til å bevege seg jevnt over skjermen i en uendelig sløyfe.
Dersom du ikke liker jevne animasjoner og ønsker en mer «rykkete» effekt, kan du bruke `steps()`-funksjonen slik:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Som du kan se i GIF-en nedenfor, vil bruk av `steps()`-funksjonen med en parameterverdi på 10 animere den underordnede div’en trinnvis istedenfor jevn animasjon. Jo høyere antall trinn, desto mindre rykkete vil animasjonen din se ut.
I eksemplet over er retningsparameteren oppgitt. Men dersom du utelater retningen, vil nettleseren bruke `end` som standardverdi for retning.
Opprette skrivemaskineffekten
Nå som du forstår hvordan `steps()`-funksjonen fungerer, er det på tide å omsette kunnskapen i praksis. Opprett en ny mappe, og gi den et passende navn. I denne mappen legger du til en `index.htm`-fil for markup og en `style.css`-fil for styling.
I `index.htm`-filen legger du til følgende boilerplate-kode:
<!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>
Kodeblokken ovenfor definerer markeringen for et enkelt HTML-nettsted. Det er en container-div som inneholder en annen div med litt dummy-tekst.
Animasjon av teksten
Åpne `styles.css`-filen og sett bredden på container-div’en til bredden av innholdet.
.container{
width: fit-content;
}
Deretter definerer du en animasjon som kontrollerer hvordan animasjonen utvikler seg over tid ved hjelp av `@keyframes`-regelen. Sett bredden til `0%` ved 0%. Ved 100 % setter du bredden til `100%` slik:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Deretter velger du elementet med klassenavnet `text` og setter `overflow`-egenskapen til `hidden`. Dette sørger for at teksten forblir skjult så lenge skriveeffekten ikke har startet. Etter at du har gjort dette, sørg for at teksten forblir på én linje ved å sette `whitespace`-egenskapen til `nowrap`. Gi tekstklassen 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. Angi riktig skriftstørrelse og `animation`-egenskapen til `type-text`. Til slutt legger du til `steps()`-funksjonen i `animation-timing-function`.
.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);
}
Når du kjører koden i nettleseren, bør du se dette:
Hvis du ønsker en lengre skriveeffekt, kan du justere varigheten på animasjonen og antall trinn spesifisert i `steps()`-funksjonen.
Gjør markøren levende
Skrivemaskineffekten er nesten komplett, men det mangler én funksjon, nemlig den blinkende markøren. Husk at i den siste kodeblokken ble det satt en høyre kant på teksten for å fungere som markør. Du kan legge til en animasjon på denne markøren ved å bruke `@keyframes`-regelen også.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Etter å ha definert den tilpassede animasjonen, legger du animasjonsnavnet til `animation`-egenskapen i tekstklassen og setter varigheten til 0,6 sekunder.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Nå når du kjører koden, bør du se en blinkende markør.
Kraften i CSS-funksjoner
CSS-funksjoner har revolusjonert måten nettsteder bygges på, og tilbyr et bemerkelsesverdig sett med verktøy for utviklere. Disse allsidige funksjonene muliggjør dynamisk styling og interaksjoner som en gang var reservert for komplekse skriptspråk.
Fra fargemanipulasjoner til responsive oppsett, animasjoner og kreative transformasjoner, har CSS-funksjoner utvidet mulighetene for webdesign. Med funksjoner som `calc()` for fleksible beregninger, `linear-gradient()` for imponerende bakgrunner og `translate()` for fengslende animasjoner, kan du skape visuelt tiltalende og engasjerende brukeropplevelser.