Du behøver ikke JavaScript for at skabe den klassiske skrivemaskineeffekt. Lær, hvordan du gør det med kun CSS ved hjælp af steps()-funktionen.
Cascading Style Sheets (CSS) er nået langt siden starten. Der er ting, der er mulige med kun CSS, som du måske ikke kender til, takket være den kontinuerlige udvikling og forbedring af sproget.
Et af de mest bemærkelsesværdige fremskridt inden for CSS er fremkomsten og forfinelsen af CSS-funktioner, som har udvidet mulighederne og kraften ved styling af webindhold betydeligt.
Hvad er skrivemaskineeffekten?
Skrivemaskineeffekten er en tekstanimationsteknik, der simulerer processen med, at indhold bliver afsløret gradvist, og efterligner skrivehandlingen, mens det udfolder sig foran seerens øjne. Denne effekt minder om old-school skrivemaskiner, tidlige computerterminaler eller Kommandolinjegrænseflader (CLI'er).
Tekstens gradvise fremtræden tilføjer et element af spænding og intriger, og tilskynder publikum til at være meget opmærksomme på det udfoldede budskab.
Sådan fungerer CSS steps()-funktionen
Funktioner i CSS introducerer et niveau af fleksibilitet, som tidligere var udfordrende at opnå ved at bruge statiske stilarter alene. Det trin() funktion er en populær funktion, der bruges i CSS-animationer. Det får animationer til at se ud, som om de skrider frem i særskilte, diskrete trin i stedet for at skifte jævnt.
trin() er en animationstidsfunktion, der tager to parametre ind. Den første parameter angiver antallet af trin, du ønsker, at din animation skal tage. Den anden parameter definerer adfærden for hvert trin. Syntaksen for trin() funktioner ser sådan ud:
animation-timing-function: steps(n, direction)
I kodeblokken ovenfor er trin() Funktionen har to parametre, nemlig: n og retning. Det retning parameter kan enten være Start eller ende.
Indstilling af retning til Start sikrer, at det første trin fuldføres, så snart animationen starter. Hvorimod indstilling af retning til ende vil køre det sidste trin, når animationen afsluttes. For at illustrere vigtigheden af trin() funktion, tag et kig på følgende HTML-kode:
<divclass="container">
<div>div>
div>
Kodeblokken ovenfor definerer en beholder div med et barn div. Hvis du vil have barnet div til at glide hen over skærmen, bruger du CSS-animationer som denne:
.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 bruger @keyframes-regel til at definere en animation som hedder flyttekasse. Denne animation anvendes derefter på den underordnede div, hvilket får den til at bevæge sig jævnt hen over skærmen i en uendelig løkke.
via GIPHY
Hvis du ikke kan lide glat animation og ønsker at opnå en "hakkende" effekt, kan du gøre brug af trin() fungerer sådan her:
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, inkorporerer den trin() funktion med en parameterværdi på 10 vil animere den underordnede div i trin i stedet for jævn animation. Jo højere antal trin, jo mindre hakkende vil din animation se ud.
via GIPHY
I ovenstående eksempel er retning parameter er angivet. Men hvis du udelader retning, vil browseren bruge ende som standardværdi for retning.
Oprettelse af skrivemaskineeffekten
Nu hvor du forstår, hvordan trin() funktionen fungerer, er det tid til at omsætte alt det, du har lært, i praksis. Opret en ny mappe, og giv den et passende navn. Tilføj en index.htm fil til opmærkning og en style.css fil til styling.
I index.htm fil, skal du tilføje følgende kedelkode:
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 simpel HTML hjemmeside. Der er en beholder div, der rummer en anden div med noget dummy-tekst.
Animering af teksten
Åbn styles.css fil og indstil bredden på beholder div til bredden af dets indhold.
.container{
width: fit-content;
}
Dernæst ved hjælp af @keyframes regel, definere en animation, der styrer, hvordan animationen skrider frem over tid. Indstil bredden til "0%" ved 0%. På 100%, indstil bredden til "100%" sådan her:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Vælg derefter elementet med klassenavnet tekst og indstil flyde over ejendom til skjult. Hvis du gør dette, vil du sikre dig, at teksten forbliver skjult, så længe skriveeffekten ikke er startet. Når du har gjort det, skal du sikre dig, at teksten forbliver på én linje ved at indstille hvidt rum ejendom til nurap. Giv den tekst klassificere en monospace-skrifttype og tilføje en grøn lodret kant til højre for teksten.
Denne kant vil give udseendet af en markør. Indstil den passende skriftstørrelse og animation ejendom til type-tekst. Til sidst tilføjes trin() funktion til animation-timing-funktion.
.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 kører koden i browseren, skal du se dette:
via GIPHY
Hvis du ønsker en længere skriveeffekt, kan du justere animationens varighed og antallet af trin angivet i trin() fungere.
Gør markøren levende
Skrivemaskineeffekten er næsten færdig, selvom der mangler en funktion, som er den blinkende markør. Husk, at i den sidste kodeblok blev der sat en højre kant på teksten for at tjene som markør. Du kan tilføje en animation til denne markør ved hjælp af @keyframes reglen også.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Når du har defineret den tilpassede animation, skal du tilføje animationsnavnet til animation ejendom på tekst klasse og indstil varigheden til 0,6 sekunder.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Nu når du kører koden, bør du se en blinkende markør.
via GIPHY
Styrken ved CSS-funktioner
CSS-funktioner har revolutioneret måden, hjemmesider er bygget på, og tilbyder et bemærkelsesværdigt værktøjssæt til dig som udvikler. Disse alsidige funktioner muliggør dynamisk styling og interaktioner, der engang var forbeholdt komplekse scriptsprog.
Fra farvemanipulationer til responsive layouts, animationer og kreative transformationer har CSS-funktioner udvidet mulighederne for webdesign. Med funktioner som calc() til fleksible beregninger, linear-gradient() til fantastiske baggrunde og translate() til fængslende animationer, kan du lave en visuelt tiltalende og engagerende bruger erfaringer.