So erstellen Sie einen animierten Tippeffekt

Bei guter Anwendung CSS-Animation kann Ihrer Website Interesse und Persönlichkeit verleihen. In diesem Artikel erfahren Sie, wie Sie einen animierten Effekt erstellen, der Ihre Typografie allmählich so erscheinen lässt, als würde sie auf einer Schreibmaschine getippt. Sie können ein Beispiel für die Animation in Aktion auf der Site für sehen Crypton , ein Kryptowährungs-Handelsbot. Der Effekt ist beeindruckend und auch einfach zu implementieren. Lesen Sie weiter, um herauszufinden, wie Sie diese Animation auf Ihrer eigenen Website erstellen können.

  • Entdecken Sie die neue Grenze der CSS-Animation

01. Dokumentinitiierung

Der erste Schritt besteht darin, die Struktur der Webseite zu initiieren. Dies besteht aus dem HTML-Container, der für die Speicherung der Kopf- und Körperteile verantwortlich ist. Während die Hauptverantwortung des Hauptabschnitts darin besteht, das externe CSS zu laden, speichert der Hauptteil den in Schritt 2 erstellten HTML-Inhalt.

Typing Effect *** STEP 2 HERE

02. HTML-Inhalt

Der HTML-Inhalt besteht aus einem Container, der die Typisierungsklasse verwendet. Dies wird vom CSS verwendet, um den Typisierungseffekt auf untergeordnete Elemente anzuwenden. Das untergeordnete Inhaltselement besteht aus einem h1-Tag. Sie können jedoch auch ein anderes Element wie 'p' verwenden, um das Element als Absatz zu erstellen.



Put your title here...

03. CSS-Initiierung

Erstellen Sie eine Datei mit dem Namen 'styles.css'. Im ersten Schritt des CSS werden die Dokument- und Textcontainer so definiert, dass sie das gesamte Browserfenster ohne sichtbaren Randabstand abdecken. In diesem Schritt werden auch die Standardfarben für den schwarzen Seitenhintergrund und die weißen Textfarben festgelegt. Inhaltselemente auf der Seite erben die in diesem Schritt festgelegte Farbe als Standardfarbe.

body,html{ display: block; width: 100%; height: 100%; background: #000; color: #fff; padding: 0; margin: 0; }

04. Kinder tippen

Alle untergeordneten Elemente im Eingabecontainer werden so eingestellt, dass sie ohne Textumbruch über einer Zeile angezeigt werden. Am wichtigsten ist, dass auf diese untergeordneten Elemente die Animation 'Tippen' angewendet wird. Diese Animation wird mit 50 Frame-Schnappschüssen über fünf Sekunden abgespielt - was den gestaffelten Tippeffekt ermöglicht.

.typing > *{ overflow: hidden; white-space: nowrap; animation: typingAnim 5s steps(50); }

05. Gesichtsaugen

Der Effekt wird auch von einem animierten Gesicht begleitet, das den eingegebenen Text zu erzählen scheint. Dieser Schritt erstellt die Augen dieses Gesichts als 'virtuelles' CSS-Element mit dem nach dem Wähler. Die Augen werden relativ zum übergeordneten Text platziert, wobei der Inhalt als zwei Punkttextzeichen festgelegt wird.



.typing > *::after{ content: '. .'; display: block; position: absolute; top: 1em; left: .35em; }

06. Gesichtsmund

Wie bei den Augen besteht der Mund des Gesichts aus einem virtuellen CSS-Element - diesmal mit dem Vor Wähler. Der Mund ist in Bezug auf das übergeordnete Textelement positioniert und hat einen Randradius, der mit einer abgerundeten Form angezeigt wird.

Das typingSpeak Animation wird angewendet; Es dauert 0,5 Sekunden mit zwei Animationsbildern. Wenn die Animation fünfmal wiederholt wird, beträgt die Gesamtanimationszeit 2,5 Sekunden.

.typing > *::before{ content: ''; position: absolute; display: block; top: 2.1em; left: .25em; width: 1em; height: .1em; border-radius: 100%; background: #fff; animation: typingSpeak .5s steps(2); animation-iteration-count: 5; }

07. Animationsdefinitionen

Dieser Schritt definiert die Animationen, auf die durch Elemente verwiesen wird, die in den vorherigen Schritten erstellt wurden. Das TypingAnim Eine Animation, die für den Tippeffekt verwendet wurde, ändert ihr Element von keiner Breite in volle Breite. Das typingSpeak Die Animation, die für den Mund des Gesichts verwendet wird, ändert sein Element von flach zu offener.

@keyframes typingAnim{ from { width: 0 } to { width: 100% } } @keyframes typingSpeak{ 0% { width: 1em; height: .1em } 100% { width: 1em; height: .5em; } } ***

Dieser Artikel wurde ursprünglich in Ausgabe 275 des kreativen Webdesign-Magazins Web Designer veröffentlicht. Kaufen Sie hier die Ausgabe 275 oder Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel: