So erstellen Sie einen Schreibmaschineneffekt mit CSS

Cascading Style Sheets (CSS) hat seit seiner Einführung einen langen Weg zurückgelegt. Es gibt Dinge, die allein mit CSS möglich sind, von denen Sie dank der kontinuierlichen Weiterentwicklung und Verbesserung der Sprache vielleicht noch nichts wissen.

Einer der bemerkenswertesten Fortschritte bei CSS ist die Entstehung und Verfeinerung von CSS-Funktionen, die die Möglichkeiten und die Leistungsfähigkeit der Gestaltung von Webinhalten erheblich erweitert haben.

Was ist der Schreibmaschineneffekt?

Der Schreibmaschineneffekt ist eine Textanimationstechnik, die den Prozess der schrittweisen Enthüllung von Inhalten simuliert und so den Vorgang des Tippens nachahmt, der sich vor den Augen des Betrachters entfaltet. Dieser Effekt erinnert an Schreibmaschinen der alten Schule, frühe Computerterminals usw Befehlszeilenschnittstellen (CLIs).

Das allmähliche Erscheinen des Textes sorgt für Spannung und Intrige und ermutigt das Publikum, der sich entfaltenden Botschaft aufmerksam zuzuhören.

So funktioniert die CSS-Funktion „steps()“.

Funktionen in CSS bieten ein Maß an Flexibilität, das bisher mit statischen Stilen allein nur schwer zu erreichen war. Der Schritte() Funktion ist eine beliebte Funktion, die in CSS-Animationen verwendet wird. Dadurch sehen Animationen so aus, als würden sie in klaren, diskreten Schritten voranschreiten, anstatt fließende Übergänge zu haben.

Schritte() ist eine Animations-Timing-Funktion, die zwei Parameter berücksichtigt. Der erste Parameter gibt die Anzahl der Schritte an, die Ihre Animation ausführen soll. Der zweite Parameter definiert das Verhalten jedes Schritts. Die Syntax für die Schritte() Funktionen sieht so aus:

animation-timing-function: steps(n, direction)

Im Codeblock oben ist die Schritte() Die Funktion hat zwei Parameter, nämlich: N Und Richtung. Der Richtung Parameter kann entweder sein Start oder Ende.

Einstellen der Richtung Zu Start stellt sicher, dass der erste Schritt abgeschlossen ist, sobald die Animation startet. Während das Festlegen der Richtung Zu Ende führt den letzten Schritt aus, wenn die Animation beendet ist. Um die Bedeutung der zu veranschaulichen Schritte() Sehen Sie sich für die Funktion den folgenden HTML-Code an:

<divclass="container">
<div>div>
div>

Der obige Codeblock definiert a Container div mit einem Kind div. Wenn Sie möchten, dass das untergeordnete Div über den Bildschirm gleitet, verwenden Sie CSS-Animationen wie diese:

.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
 100% {
transform: translateX(100vw);
 }
}

Der obige Codeblock verwendet die @keyframes-Regel zum Definieren einer Animation genannt Movebox. Diese Animation wird dann auf das untergeordnete Div angewendet, wodurch es sich in einer Endlosschleife reibungslos über den Bildschirm bewegt.

Wenn Sie keine flüssigen Animationen mögen und einen „abgehackten“ Effekt erzielen möchten, können Sie dies nutzen Schritte() funktionieren so:

div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}

Wie Sie im GIF unten sehen können, ist die Einbindung des Schritte() Eine Funktion mit einem Parameterwert von 10 animiert das untergeordnete Div in Schritten statt in einer gleichmäßigen Animation. Je höher die Anzahl der Schritte, desto weniger abgehackt wirkt Ihre Animation.

Im obigen Beispiel ist die Richtung Parameter bereitgestellt wird. Wenn Sie jedoch das weglassen Richtung, wird der Browser verwenden Ende als Standardwert für Richtung.

Den Schreibmaschineneffekt erzeugen

Jetzt, da Sie verstehen, wie das funktioniert Schritte() Wenn die Funktion funktioniert, ist es an der Zeit, alles Gelernte in die Praxis umzusetzen. Erstellen Sie einen neuen Ordner und geben Sie ihm einen passenden Namen. Fügen Sie in diesem Ordner eine hinzu index.htm Datei für Markup und a style.css Datei zum Stylen.

Im index.htm Fügen Sie in der Datei den folgenden Boilerplate-Code hinzu:

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>

Der obige Codeblock definiert das Markup für a einfache HTML-Website. Da ist ein Container div, das ein weiteres div mit etwas Dummy-Text enthält.

Den Text animieren

Öffne das Styles.css Datei und legen Sie die Breite fest Container div auf die Breite seines Inhalts.

.container{
width: fit-content;
}

Als nächstes verwenden Sie die @keyframes Mit dieser Regel definieren Sie eine Animation, die steuert, wie die Animation im Laufe der Zeit verläuft. Stellen Sie die Breite auf „0 %“ ein 0%. Bei 100%, setzen Sie die Breite wie folgt auf „100 %“:

@keyframes type-text {
 0% {
width: 0%;
 }
 100% {
width: 100%;
 }
}

Wählen Sie als Nächstes das Element mit dem Klassennamen aus Text und stellen Sie die ein Überlauf Eigentum zu versteckt. Dadurch wird sichergestellt, dass der Text verborgen bleibt, solange der Tippeffekt noch nicht eingesetzt hat. Stellen Sie anschließend sicher, dass der Text in einer Zeile bleibt, indem Sie Folgendes festlegen Leerzeichen Eigentum zu nowrap. Gib die Text Klasse eine Monospace-Schriftart und füge rechts vom Text einen grünen vertikalen Rahmen hinzu.

Dieser Rand sieht aus wie ein Cursor. Stellen Sie das entsprechende ein Schriftgröße und das Animation Eigentum zu Text eingeben. Zum Schluss fügen Sie die hinzu Schritte() Funktion zur 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);
}

Wenn Sie den Code im Browser ausführen, sollten Sie Folgendes sehen:

Wenn Sie einen längeren Tippeffekt wünschen, können Sie die Animationsdauer und die Anzahl der im angegebenen Schritt anpassen Schritte() Funktion.

Den Cursor zum Leben erwecken

Der Schreibmaschineneffekt ist fast vollständig, es fehlt jedoch ein Feature, nämlich der blinkende Cursor. Denken Sie daran, dass im letzten Codeblock ein nach rechts gerichteter Rand für den Text festgelegt wurde, der als Cursor dient. Mit können Sie diesem Cursor eine Animation hinzufügen @keyframes Regel auch.

@keyframes cursor-blink {
 0% {
border-color: transparent;
 }
 100% {
border-color: green;
 }
}

Fügen Sie nach dem Definieren der benutzerdefinierten Animation den Animationsnamen hinzu Animation Grundstück auf der Text Klasse und stellen Sie die Dauer auf 0,6 Sekunden ein.

.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}

Wenn Sie nun den Code ausführen, sollten Sie einen blinkenden Cursor sehen.

Die Leistungsfähigkeit von CSS-Funktionen

CSS-Funktionen haben die Art und Weise, wie Websites erstellt werden, revolutioniert und bieten Ihnen als Entwickler ein bemerkenswertes Toolkit. Diese vielseitigen Funktionen ermöglichen dynamisches Styling und Interaktionen, die früher komplexen Skriptsprachen vorbehalten waren.

Von Farbmanipulationen bis hin zu responsiven Layouts, Animationen und kreativen Transformationen haben CSS-Funktionen die Möglichkeiten des Webdesigns erweitert. Mit Funktionen wie calc() für flexible Berechnungen, linear-gradient() für atemberaubende Hintergründe und Mit Translate() für fesselnde Animationen können Sie optisch ansprechende und ansprechende Benutzer erstellen Erfahrungen.