Du behöver inte JavaScript för att skapa den klassiska skrivmaskinseffekten. Lär dig hur du gör det med bara CSS med hjälp av steps()-funktionen.
Cascading Style Sheets (CSS) har kommit långt sedan starten. Det finns saker som är möjliga med bara CSS som du kanske inte känner till, tack vare den kontinuerliga utvecklingen och förbättringen av språket.
En av de mest anmärkningsvärda framstegen inom CSS är framväxten och förfining av CSS-funktioner, som avsevärt har utökat kapaciteten och kraften i att utforma webbinnehåll.
Vad är skrivmaskinseffekten?
Skrivmaskinseffekten är en textanimeringsteknik som simulerar processen med att innehållet avtäcks progressivt och efterliknar skrivhandlingen när den utspelar sig framför betraktarens ögon. Denna effekt påminner om gammaldags skrivmaskiner, tidiga datorterminaler eller Kommandoradsgränssnitt (CLI).
Textens gradvisa framträdande tillför ett element av spänning och intriger, vilket uppmuntrar publiken att ägna stor uppmärksamhet åt det utspelade budskapet.
Hur funktionen CSS steps() fungerar
Funktioner i CSS introducerar en nivå av flexibilitet som tidigare var utmanande att uppnå med enbart statiska stilar. De steg() funktion är en populär funktion som används i CSS-animationer. Det får animationer att se ut som om de går framåt i distinkta, diskreta steg istället för att övergå smidigt.
steg() är en animationstidsfunktion som tar in två parametrar. Den första parametern anger antalet steg du vill att din animation ska ta. Den andra parametern definierar beteendet för varje steg. Syntaxen för steg() funktionerna ser ut så här:
animation-timing-function: steps(n, direction)
I kodblocket ovan visas steg() Funktionen har två parametrar nämligen: n och riktning. De riktning parameter kan antingen vara Start eller slutet.
Ställa in riktning till Start säkerställer att det första steget slutförs så snart animeringen startar. Medan ställa in riktning till slutet kommer att köra det sista steget när animeringen är klar. För att illustrera vikten av steg() funktionen, ta en titt på följande HTML-kod:
<divclass="container">
<div>div>
div>
Kodblocket ovan definierar en behållare div med ett barn div. Om du vill att barn-div ska glida över skärmen använder du CSS-animationer så här:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Kodblocket ovan använder @keyframes-regel för att definiera en animering som heter flyttlåda. Denna animering appliceras sedan på den underordnade div, vilket gör att den rör sig smidigt över skärmen i en oändlig slinga.
via GIPHY
Om du inte gillar smidig animering och vill uppnå en "hacklig" effekt kan du använda dig av steg() fungerar så här:
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 nedan, inkluderande steg() funktion med ett parametervärde på 10 kommer att animera den underordnade div i steg istället för smidig animering. Ju högre antal steg, desto mindre hackig kommer din animation att se ut.
via GIPHY
I exemplet ovan är riktning parameter tillhandahålls. Men om du utelämnar riktning, kommer webbläsaren att använda slutet som standardvärde för riktning.
Skapa skrivmaskinseffekten
Nu när du förstår hur steg() funktionen fungerar, det är dags att omsätta allt du lärt dig i praktiken. Skapa en ny mapp och ge den ett lämpligt namn. I den mappen lägger du till en index.htm fil för markering och en style.css fil för styling.
I den index.htm fil, lägg till följande typkod:
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>Kodblocket ovan definierar markeringen för en enkel HTML-webbplats. Det finns en behållare div som innehåller en annan div med lite dummytext.
Animera texten
Öppna styles.css fil och ställ in bredden på behållare div till bredden av dess innehåll.
.container{
width: fit-content;
}
Därefter använder du @nyckelrutor regel, definiera en animation som styr hur animeringen fortskrider över tiden. Ställ in bredden på "0%" vid 0%. På 100%, ställ in bredden till "100%" så här:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Välj sedan elementet med klassnamnet text och ställ in svämma över egendom till dold. Om du gör detta kommer du att se till att texten förblir dold så länge skriveffekten inte har startat. Efter att ha gjort det, se till att texten stannar på en rad genom att ställa in blanksteg egendom till nurap. Ge den text klassa ett monospace-teckensnitt och lägg till en grön vertikal ram till höger om texten.
Denna kant kommer att ge utseendet av en markör. Ställ in lämplig textstorlek och den animation egendom till typ-text. Lägg slutligen till steg() funktion till 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ör koden i webbläsaren bör du se detta:
via GIPHY
Om du vill ha en längre skriveffekt kan du justera animeringens varaktighet och antalet steg som anges i steg() fungera.
Väck markören till liv
Skrivmaskinseffekten är nästan komplett, även om det saknas en funktion, som är den blinkande markören. Kom ihåg att i det sista kodblocket sattes en högerkant på texten för att fungera som markör. Du kan lägga till en animation till den här markören med hjälp av @nyckelrutor regera också.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
När du har definierat den anpassade animationen, lägg till animationsnamnet i animation egendom på text klass och ställ in varaktigheten till 0,6 sekunder.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Nu när du kör koden bör du se en blinkande markör.
via GIPHY
Kraften med CSS-funktioner
CSS-funktioner har revolutionerat sättet att bygga webbplatser och erbjuder en anmärkningsvärd verktygslåda för dig som utvecklare. Dessa mångsidiga funktioner möjliggör dynamisk stil och interaktioner som en gång var reserverade för komplexa skriptspråk.
Från färgmanipulationer till responsiva layouter, animationer 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 animationer kan du skapa visuellt tilltalande och engagerande användare upplevelser.
