CSS, eller Cascading Style Sheets, har utvecklats avsevärt sedan starten. Det finns många möjligheter med enbart CSS som du kanske inte är medveten om, tack vare den ständiga utvecklingen och förbättringen av språket.
En av de mest betydande framstegen inom CSS är introduktionen och förfiningen av CSS-funktioner, som markant har ökat kapaciteten och kraften i att formge webbinnehåll.
Vad är skrivmaskinseffekten?
Skrivmaskinseffekten är en teknik för textanimering som simulerar hur innehållet gradvis avslöjas, och efterliknar skrivandet när det sker framför betraktarens ögon. Denna effekt påminner om gamla skrivmaskiner, tidiga datorterminaler eller kommandoradsgränssnitt (CLI).
Textens successiva uppkomst lägger till ett element av spänning och nyfikenhet, vilket motiverar åskådarna att noggrant följa det budskap som förmedlas.
Hur funktionen CSS steps() fungerar
Funktioner i CSS introducerar en flexibilitet som tidigare var svår att uppnå med enbart statiska format. Funktionen `steps()` är en omtyckt funktion som används i CSS-animeringar. Den får animeringar att se ut som om de fortskrider i tydliga, diskreta steg i stället för att flyta på smidigt.
`steps()` är en animeringstidsfunktion som tar emot två parametrar. Den första parametern specificerar antalet steg du vill att din animering ska ta. Den andra parametern definierar beteendet för varje steg. Syntaxen för funktionen `steps()` ser ut så här:
animation-timing-function: steps(n, direction)
I kodblocket ovan har funktionen `steps()` två parametrar, nämligen: `n` och `direction`. Parametern för riktning kan antingen vara `start` eller `end`.
Genom att ange riktningen till `start` säkerställs att det första steget är slutfört så fort animeringen startar. Om du ställer in riktningen till `end` kommer det sista steget att utföras när animeringen avslutas. För att belysa betydelsen av funktionen `steps()`, titta på följande HTML-kod:
<div class="container"> <div></div> </div>
Ovanstående kod definierar en container-div med en underordnad div. Om du vill att den underordnade div:en ska glida över skärmen kan du använda CSS-animeringar så här:
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Ovanstående kod använder `@keyframes`-regeln för att definiera en animation vid namn `movebox`. Denna animering används sedan på den underordnade div:en, vilket får den att röra sig smidigt över skärmen i en oändlig loop.
Om du inte föredrar smidig animering utan istället vill skapa en ”hackig” effekt, kan du använda funktionen `steps()` på följande sätt:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Som du ser i GIF:en nedan kommer användningen av funktionen `steps()` med ett parametervärde på 10 att animera den underordnade div:en i steg i stället för smidig animering. Ju högre antal steg, desto mindre hackig kommer din animering att se ut.
I exemplet ovan anges riktningsparametern. Men om du utelämnar riktningen kommer webbläsaren att använda `end` som standardriktning.
Skapa skrivmaskinseffekten
Nu när du förstår hur funktionen `steps()` fungerar är det dags att tillämpa det du har lärt dig i praktiken. Skapa en ny mapp och ge den ett lämpligt namn. Lägg till en fil `index.htm` för uppmärkning och en fil `style.css` för formatering i den mappen.
I filen `index.htm` lägger du till följande kod:
<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>
Koden ovan definierar uppmärkningen för en enkel HTML-webbplats. Det finns en container-div som innehåller en annan div med lite platshållartext.
Animera texten
Öppna filen `styles.css` och ange bredden på containerns div till bredden på dess innehåll.
.container{
width: fit-content;
}
Använd sedan `@keyframes`-regeln och definiera en animering som kontrollerar hur animeringen fortgår över tid. Ange bredden till `0%` vid 0%. Vid 100% anger du bredden till `100%` så här:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Välj därefter elementet med klassnamnet `text` och ställ in egenskapen `overflow` till dold. Genom att göra detta ser du till att texten förblir dold tills skriveffekten har börjat. När du har gjort det ska du se till att texten stannar på en rad genom att ställa in egenskapen `white-space` till `nowrap`. Ge textklassen ett teckensnitt med monospace och lägg till en grön vertikal kant till höger om texten.
Denna kant kommer att ge intryck av en markör. Ange lämplig teckenstorlek och ställ in animationsegenskapen till `type-text`. Lägg slutligen till funktionen `steps()` till `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 kör koden i webbläsaren bör du se följande:
Om du vill ha en längre skriveffekt kan du justera animeringens varaktighet och antalet steg som anges i funktionen `steps()`.
Ge markören liv
Skrivmaskinseffekten är nästan färdig, även om en funktion saknas, nämligen den blinkande markören. Kom ihåg att i det sista kodblocket lades en högerkant till texten för att fungera som en markör. Du kan även lägga till en animering till denna markör med hjälp av `@keyframes`-regeln.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
När du har definierat den anpassade animeringen lägger du till animeringsnamnet i animationsegenskapen i textklassen och anger varaktigheten till 0,6 sekunder.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Nu när du kör koden ska du se en blinkande markör.
Kraften med CSS-funktioner
CSS-funktioner har revolutionerat hur webbplatser byggs och erbjuder en imponerande verktygslåda för oss utvecklare. Dessa flexibla funktioner ger möjlighet till dynamisk formatering och interaktioner som tidigare var reserverade för komplexa skriptspråk.
Från färgmanipulationer till responsiva layouter, animeringar och kreativa transformationer, CSS-funktioner har utökat möjligheterna för webbdesign. Med funktioner som `calc()` för flexibla beräkningar, `linear-gradient()` för fantastiska bakgrunder och `translate()` för fängslande animeringar kan du skapa visuellt tilltalande och engagerande användarupplevelser.