U heeft geen JavaScript nodig om het klassieke typemachine-effect te creëren. Leer hoe u dit kunt doen met alleen CSS met behulp van de functie steps().
Cascading Style Sheets (CSS) heeft sinds de oprichting een lange weg afgelegd. Er zijn dingen die mogelijk zijn met alleen CSS waar je misschien nog niet van op de hoogte bent, dankzij de voortdurende evolutie en verbetering van de taal.
Een van de meest opvallende ontwikkelingen in CSS is de opkomst en verfijning van CSS-functies, die de mogelijkheden en kracht van het stylen van webinhoud aanzienlijk hebben uitgebreid.
Wat is het typemachine-effect?
Het typemachine-effect is een tekstanimatietechniek die het proces simuleert waarbij de inhoud geleidelijk wordt onthuld, waarbij de handeling van het typen wordt nagebootst terwijl deze zich voor de ogen van de kijker ontvouwt. Dit effect doet denken aan ouderwetse typemachines, vroege computerterminals, of Commandoregelinterfaces (CLI's).
De geleidelijke verschijning van de tekst voegt een element van spanning en intriges toe, waardoor het publiek wordt aangemoedigd om goed op de zich ontvouwende boodschap te letten.
Hoe de CSS-stappen()-functie werkt
Functies in CSS introduceren een niveau van flexibiliteit dat voorheen moeilijk te bereiken was met alleen statische stijlen. De stappen() function is een populaire functie die wordt gebruikt in CSS-animaties. Het zorgt ervoor dat animaties eruit zien alsof ze in duidelijke, discrete stappen voortgaan in plaats van vloeiend over te gaan.
stappen() is een animatietimingfunctie die twee parameters bevat. De eerste parameter geeft het aantal stappen aan dat u wilt dat uw animatie neemt. De tweede parameter definieert het gedrag van elke stap. De syntaxis voor de stappen() functies ziet er als volgt uit:
animation-timing-function: steps(n, direction)
In het bovenstaande codeblok wordt de stappen() functie heeft twee parameters namelijk: N En richting. De richting parameter kan beide zijn begin of einde.
Het instellen van de richting naar begin zorgt ervoor dat de eerste stap wordt afgerond zodra de animatie start. Terwijl het instellen van de richting naar einde zal de laatste stap uitvoeren zodra de animatie is voltooid. Om het belang van de stappen() functie, kijk eens naar de volgende HTML-code:
<divclass="container">
<div>div>
div>
Het bovenstaande codeblok definieert a houder div met een kind div. Als je wilt dat de onderliggende div over het scherm glijdt, gebruik je CSS-animaties als deze:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Het bovenstaande codeblok maakt gebruik van de @keyframes-regel om een animatie te definiëren genaamd Verhuisdoos. Deze animatie wordt vervolgens toegepast op de onderliggende div, waardoor deze in een oneindige lus soepel over het scherm beweegt.
via GIPHY
Als je niet van vloeiende animaties houdt en een "choppy" effect wilt bereiken, kun je gebruik maken van de stappen() functioneer als volgt:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Zoals je kunt zien in de onderstaande GIF, waarin de stappen() functie met een parameterwaarde van 10 zal de onderliggende div in stappen animeren in plaats van vloeiende animaties. Hoe hoger het aantal stappen, hoe minder schokkerig uw animatie eruit zal zien.
via GIPHY
In het bovenstaande voorbeeld is de richting parameter wordt verstrekt. Als u echter de richting, zal de browser gebruiken einde als standaardwaarde voor richting.
Het typemachine-effect creëren
Nu je begrijpt hoe de stappen() functie werkt, is het tijd om alles wat je hebt geleerd in de praktijk te brengen. Maak een nieuwe map en geef deze een passende naam. Voeg in die map een index.htm bestand voor opmaak en a stijl.css bestand voor styling.
In de index.htm bestand, voeg de volgende standaardcode toe:
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>Het bovenstaande codeblok definieert de opmaak voor a eenvoudige HTML-website. Er is een houder div die een andere div bevat met wat dummytekst.
De tekst animeren
Open de stijlen.css bestand en stel de breedte in van het houder div aan de breedte van de inhoud.
.container{
width: fit-content;
}
Vervolgens wordt met behulp van de @sleutelframes regel, definieer een animatie die bepaalt hoe de animatie in de loop van de tijd vordert. Stel de breedte in op "0%" bij 0%. Bij 100%, stel de breedte als volgt in op "100%":
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Selecteer vervolgens het element met de klassenaam tekst en stel de overloop eigendom aan verborgen. Als u dit doet, zorgt u ervoor dat de tekst verborgen blijft zolang het type-effect niet is gestart. Zorg er daarna voor dat de tekst op één regel blijft door de witte ruimte eigendom aan nourap. Geef de tekst klasse een monospace-lettertype en voeg een groene verticale rand toe aan de rechterkant van de tekst.
Deze rand zal het uiterlijk van een cursor geven. Stel de juiste in lettertypegrootte en de animatie eigendom aan typ Text. Voeg ten slotte de stappen() functie aan de animatie-timing-functie.
.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);
}
Wanneer u de code in de browser uitvoert, zou u dit moeten zien:
via GIPHY
Als u een langer type-effect wilt, kunt u de animatieduur en het aantal stappen aanpassen dat is opgegeven in de stappen() functie.
De cursor tot leven brengen
Het typemachine-effect is bijna compleet, hoewel er één ontbrekende functie is: de knipperende cursor. Bedenk dat in het laatste codeblok een rand naar rechts op de tekst was geplaatst om als cursor te dienen. U kunt een animatie aan deze cursor toevoegen met behulp van de @sleutelframes regel ook.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Nadat u de aangepaste animatie hebt gedefinieerd, voegt u de animatienaam toe aan het animatie eigendom op de tekst les en stel de duur in op 0,6 seconden.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Wanneer u nu de code uitvoert, zou u een knipperende cursor moeten zien.
via GIPHY
De kracht van CSS-functies
CSS-functies hebben een revolutie teweeggebracht in de manier waarop websites worden gebouwd en bieden u als ontwikkelaar een opmerkelijke toolkit. Deze veelzijdige functies maken dynamische styling en interacties mogelijk die ooit voorbehouden waren aan complexe scripttalen.
Van kleurmanipulaties tot responsieve lay-outs, animaties en creatieve transformaties: CSS-functies hebben de mogelijkheden van webdesign uitgebreid. Met functies als calc() voor flexibele berekeningen, linear-gradient() voor verbluffende achtergronden, en translate() voor boeiende animaties, kunt u een visueel aantrekkelijke en boeiende gebruiker maken ervaringen.
