Setzen Sie Ihren Text mit diesen schillernden Effekten in Bewegung

Der Trend, alles in Bewegung zu setzen, beherrscht heutzutage das Quartier. Sie können nicht anders, als diesem Wahnsinn zu folgen und eine Besessenheit davon zu entwickeln, jedem Detail einer Website Leben einzuhauchen. Die statische Ära ist vorbei. Alles ist dynamisch. Und weisst du was? Die Benutzer sind sich dessen vollkommen bewusst.

Für einige sind das schlechte Nachrichten, da es Herkulesanstrengungen bedarf, um Benutzer glauben zu machen, dass eine statische Website ein aufregendes Erlebnis bietet. Für andere ist es eine Gelegenheit, anzugeben, Ihr inneres Genie zu enthüllen und sich in die Welt der dynamischen Verrücktheit entführen zu lassen.

Wenn Sie immer noch glauben, dass das einzige, was Sie mit Typografie tun können, darin besteht, eine ausgefallene Schrift oder einen extravaganten Schwebeeffekt zu verwenden, dann werden wir Ihnen das Gegenteil beweisen. Sie können mit Typografie Wunder vollbringen, indem Sie sie in etwas verwandeln, das anderen in Bezug auf die Wirkung nicht nachgibt.

Und wenn Sie kein Fan von immersiven oder schweren Lösungen sind, dann ist dies in der Tat ein Ausweg. Um Ihnen einen soliden Start zu ermöglichen, haben wir einige unglaubliche Codeschnipsel gesammelt, bei denen der Schriftzug gekonnt in Bewegung gesetzt wurde und ein hervorragendes Ergebnis erzielt.

Erschütternde Textanimation von Arsen Zbidniakov

Schauen Sie sich einfach Shattering Text Animation von Arsen Zbidniakov an. Ist es nicht brillant? Weder überfordert die Lösung Besucher mit viel Action und unnötiger Dynamik, noch überlastet sie Ihr System. Es funktioniert einfach und lässt alle in einem „Wow“-Zustand zurück.

Dieser erschütternde Effekt, der mit Hilfe von GSAP-Tools und SVG-Pfad erstellt wurde, ist einfach unglaublich. Bewegen Sie außerdem den Mauszeiger darüber und Sie haben die Möglichkeit, die Geschwindigkeit des Prozesses zu steuern und alles zu verlangsamen. Es ist einfach phänomenal.

Textanimation von Szenia Zadvornykh

Ähnlich wie unser erstes Beispiel zeigt dieses Code-Snippet eine Animation zum Zusammensetzen und Zerlegen von Text. Diesmal verwendet der Künstler jedoch Three.js, um alles zum Leben zu erwecken. Dies ist eine weitere kontrollierbare Explosion. Ja, Sie haben richtig gelesen: Sie können die Geschwindigkeit der Animation auch durch Klicken und Ziehen steuern. Und wenn Ihnen dieses Experiment Spaß macht, Szenia hat noch ein paar unterhaltsamere Beispiele. Schau dir einfach sein Profil an.

Motion Graphic Typeface und ein weiteres Experiment von Ara

Ara hat mehrere überwältigende Experimente mit Typografie. Die beiden folgenden Beispiele sind abstrakt, basieren auf geometrischen Manipulationen und fühlen sich wie Hightech an und sehen auch so aus. In gewisser Weise sind sie sogar ein bisschen bizarr.

Im ersten Beispiel besteht der Text aus winzigen Stücken, die langsam aber sicher einen 3D-Partikeltunnel bilden.

Im zweiten wird jedes Symbol aus primitiven Polygonen wie Dreiecken, Quadraten und Rechtecken konstruiert, die in Bewegung gebracht werden. Es fühlt sich an, als würde jemandes digitale Hand alles zusammenweben.

GSAP-Textanimation von Nate Wiley

Nate Wiley hat Split Text von Greensock zu seinem Vorteil genutzt und eine wunderbare Textanimation erstellt. Er nimmt ein normales Stück Text und zerlegt es in winzige Fragmente, von denen jedes ein Symbol ist. Nach der Explosion bewegen sich die Charaktere in verschiedene Richtungen und verschwinden sanft.

CSS Motion Typography: Explodierender Text von Dudley Storey

Im Gegensatz zu den vorherigen Beispielen, bei denen High-End-Technologien hinter der Schönheit der Lösungen stehen, führt hier CSS-basierte Bewegung die Show an. Dudley Storey setzt CSS-Keyframe-Animationen, Übergänge, JavaScript, SVG und ein bisschen Adobe Illustrator-Magie ein. Das Wort zersplittert ein wenig und zerbricht dann so in polygonale Stücke, dass man es noch lesen kann. Wenn Sie Ihrer Typografie stilvolle Brutalität verleihen möchten, ist dieser Effekt sicherlich ein Ansatzpunkt.

Viele Icons in 3D mit Three.js von Yasunobu Ikeda

Während Nate Wiley Text wegbläst, zwingt Yasunobu Ikeda im Gegenteil chaotisch über den Bildschirm verstreute Partikel dazu, sich zu Text zu formen. Hier sind die Partikel nichts anderes als winzige Symbole. Der Autor verwendet Three.js, um diese wunderschöne 3D-Animation nachzubilden.

SVG Path animierter Text von Tamino Martinius

Tamino Martinius profitiert von traditionelleren Manipulationen, indem er SVG-Pfade verwendet. Dank schlanker Formen, ultradünner Linien und flüssigkeitsähnlichem Verhalten strahlt die Animation Eleganz und Raffinesse aus. Obwohl es nicht so überwältigend ist wie unser erstes Beispiel, liegt seine Stärke darin, dass es für zahlreiche Projekte geeignet ist, da es sicherlich eine praktische Lösung ist.

Für mehr praktische Nutzung

Apropos, wir haben auch einige inspirierende und praktische Lösungen aufgenommen. Hier wird Schrift in Bewegung gesetzt, damit Sie kleine Schritte in diese Richtung gehen können.

Während die ersten beiden Beispiele Effekte aufweisen, die für Slogans und einprägsame Phrasen von Vorteil sein können, ist letzteres eine interessante Lösung für normale Textblöcke.

Think – create Zyklus von Mikael Ainalem

Der Stift von Mikael Ainalem zeigt eine zyklische Animation, in der Wörter in einer Drehung hervorgehoben werden. Es ist eine hervorragende Möglichkeit, Benutzer von einem Wort zum anderen zu führen.

GEDRÜCKT von Tryggvi Gylfason

Tryggvi Gylfason fügt eine bewegliche Linie hinzu, die von links nach rechts gleitet und Buchstaben zwingt, ihr zu folgen, wodurch Symbole eines Wortes entweder gedrückt oder gezogen werden. Der Effekt ist klein, aber fesselnd.

Bewegungsunschärfe beim Scrollen von Text mit TweenMax von Ignacio Correia

Ignacio Correia versieht Text mit einem Bewegungsunschärfeeffekt. Wenn Sie sich zügig nach unten bewegen, verschwimmt der Text zu einem fast weißen Fleck. Wenn Sie langsamer werden, werden die Wörter weniger undeutlich.

Ein Fall für die Verwendung von Animation in der Typografie

Diese typografischen Animationen zwingen uns, anzuhalten und die Aktion zu genießen. Sie sind genauso inspirierend und auffällig wie Animationen, die in anderen Elementen, wie z. B. Heldenbereichen, zu sehen sind.

Leider sehen wir nicht viele von ihnen in freier Wildbahn. Es scheint, dass jeder davon besessen ist, actiongeladene Vollbildanimationen zu verwenden, anstatt einfache Schriftzüge in Bewegung zu setzen. Aber wie wir hier gesehen haben, können diese Effekte genauso große Auswirkungen auf die Benutzer haben.