10 erstaunliche animierte Text-CSS- und JavaScript-Code-Snippets

Mit einfachem CSS und ein paar Zeilen JavaScript können Sie einige hübsche schillernde Texteffekte erstellen. Diese Effekte reichen von Textanzeigeanimationen bis hin zu 3D-Rotationen oder allem anderen, was Sie sich vorstellen können.

Und in diesem Beitrag habe ich 10 der coolsten Beispiele aus dem Internet katalogisiert, die zeigen, was man mit ein bisschen stilisiertem Text und CSS-Code machen kann.

Diese CSS-Animationstools könnten Ihnen auch gefallen.

1. Titelanimation

Dieser animierte Titeleffekt von Robin Treur folgt dem Stil vieler Filme oder Videospiele. Die Buchstaben erhalten einen herausragenden 3D-Effekt, indem CSS3-Textschatten zusammen mit einer leichten diagonalen Neigung verwendet werden.

Der Einblend-Animationsstil erinnert mich an klassische Filme aus den 1930er Jahren mit dem gleichen schrägen Text. Alles wird über CSS gesteuert, aber die Schaltfläche „Neustart“ wird mit JavaScript erstellt. Auf diese Weise können Sie die Animation viele Male abspielen, um sie besser zu sehen.

2. Erschütternd

Das Erstellen von zerschmettertem Text ist mit Tools wie After Effects eine einfache Aufgabe, aber das Erstellen einer Textzerschmetterungsanimation mit Code ist viel schwieriger, was diesen Stift von Arsen Zbidniakov ziemlich beeindruckend macht.

Der Text wird tatsächlich mit SVG-Formen erstellt, was den Animationsprozess ein wenig einfacher macht. Das bedeutet auch, dass Sie den Text nicht wie gewohnt auswählen, kopieren oder mit ihm interagieren können.

Sie können Ihrer Website jedoch einen ähnlichen Effekt hinzufügen, wenn Sie ihn für ein Logo oder ein anderes nicht interaktives Seitenelement verwenden.

3. Verdrehte Buchstaben

Entwickler Mamun Khandaker hat diese Sammlung von verdrehten Buchstabenanimationen zusammengestellt. Jeder Animationsstil hat einen anderen Namen und Sie können sie alle in diesem einen Stift durchsuchen.

Ich konnte sehen, dass diese Texteffekte auf Zielseiten oder Homepages für ein Tool/eine Webanwendung verwendet wurden. Diese fallen sofort ins Auge und hinterlassen beim Besucher einen bleibenden Eindruck. Außerdem sind sie alle mit 100 % reinem CSS erstellt und super einfach zu optimieren.

4. Pixel-Alphabet

Dieser einzigartige animierte Pixeleffekt ist definitiv seltsam, aber auch seltsam faszinierend. Es basiert hauptsächlich auf JavaScript und wurde vom Entwickler Georgi Nikoloff als Möglichkeit entwickelt, mit dem HTML5-Canvas-Element zu spielen.

Es verwendet Noto Serif als Schriftartbasis und wandelt Buchstaben in formbare Elemente innerhalb des Canvas-Elements um. JavaScript zerlegt die Buchstaben in kleinere Punkte und diese bilden die Grundlage der Animation.

Ich kann nicht sagen, dass dies viel praktischen Nutzen hätte, aber es ist ein Beweis dafür, wie weit die Webanimation gekommen ist.

5. Schreibkarussell

Dieser Effekt ist bei kleinen Portfolios und Agentur-Websites bekanntermaßen beliebt. Die Texteingabeanimation erscheint oft in der Kopfzeile einer Website und ahmt das Aussehen von jemandem nach, der in ein Textverarbeitungsprogramm eintippt.

Alles ist in einem Element mit einer guten Mischung aus CSS- und JavaScript-Animation enthalten. Manchmal sehen Sie, dass Websites dies verwenden, um Beschreibungen ihrer Arbeit, ihres Werdegangs oder von Kunden, mit denen sie zusammengearbeitet haben, aufzulisten.

Es ist definitiv ein lustiger Effekt, wenn es in Maßen verwendet wird. Da jeweils nur ein Wort sichtbar ist, schränkt dies die Lesbarkeit der Seite ein, aber wenn es sparsam verwendet wird, ist dies ein sehr cooler Effekt, den jeder kopieren kann.

6. Tyger Tyger

In Anlehnung an das Gedicht „The Tyger“ von William Blake zieht diese einzigartige Animation von Joseph Martucci wirklich Ihre Aufmerksamkeit auf sich.

Der Fokus liegt hier nicht so sehr auf den Inhalten, sondern eher auf den typografischen Stilen und Animationen. Jedes „Segment“ des Textes hat seinen eigenen Stil mit Textumrissen und leuchtenden Effekten. Es ist ein großartiges Beispiel dafür, wie Sie eine Homepage so gestalten können, dass Text mit setTimeout() sequentiell animiert wird.

7. Snap SVG

Mit der Open-Source-Bibliothek Snap.svg kann jeder hochauflösende SVG-Bilder mit nur wenig Code erstellen. Dies ist viel einfacher als das Erlernen eines Programms wie Illustrator, und Sie können genau wie in diesem lustigen Beispiel von Alexis Blondin animieren.

Alle Buchstaben werden dynamisch über JavaScript erstellt, einschließlich der zufälligen Zeichen, die in der Animation verwendet werden. Die moderne SVG-Unterstützung ist enorm und diese Bildtypen können die Art und Weise, wie wir Websites in den kommenden Jahren erstellen, radikal verändern. Diese Snap.svg-Animation ist nur ein Beispiel und definitiv ein cooles.

8. Klammeranimation

Hier ist eine weitere ziemlich verbreitete Textanimationstechnik, die ich ständig sehe. Es verwendet Klammern mit rotierendem Text, fast wie ein Rolodex auf der Seite.

Diese Animation ahmt den zuvor erwähnten Tippkarusselleffekt nach, außer dass dies nur mit CSS erstellt werden kann. Es basiert auf einer benutzerdefinierten Schleifenanimation, die sich von einem CSS-Keyframe zum anderen bewegt, wobei jeder Frame ein anderes Wort oder eine andere Phrase im rotierenden Text anzeigt.

Auf einer Homepage finde ich diesen Effekt viel subtiler und besser ablesbar. Wenn Sie nach coolen Texteffekten für Ihre Homepage suchen, wäre dies eine ausgezeichnete Wahl.

9. Unzerbrechliche Kimmie Schmidt

Dieser süße Logo-Effekt wurde der Netflix-Serie „Unbreakable Kimmie Schmidt“ entlehnt. Alles wird mit CSS erstellt, einschließlich der Textstile und der benutzerdefinierten Animationen.

Der Seitenkörper hat eine Klasse, die die Animation initiiert, und diese Klasse wird mit JavaScript an die Seite angehängt. Von da an ist alles reines CSS. Es verwendet meistens eine Reihe von Transformationen, um den überraschend realistischen Sprungeffekt zu erzeugen.

Es ist ein weiteres Beispiel dafür, wie viel CSS3 leisten kann, wenn Sie wissen, wie man es benutzt.

10. SVG-Text füllen

Schließlich kommen wir zu dieser sehr einzigartigen SVG-Fülleranimation, die eine Mischung aus Boxschatten und der CSS-Stricheigenschaft verwendet.

Dieser Text besteht vollständig aus SVGs, ist aber auch auswählbar, sodass Sie Buchstaben wie normalen Text kopieren/einfügen können. Es ist vollständig kompatibel mit allen Browsern und die Animation ist so subtil, dass sie in jede Website passt.

Alle diese Textanimationen bringen etwas Neues auf den Tisch. Vielleicht finden Sie sie nicht alle praktisch oder für Ihre eigene Arbeit brauchbar, aber sie beweisen, dass mit der richtigen Herangehensweise fast alles möglich ist.