Welche Textanimationen sind im Webdesign möglich?
Als Digitalagentur bzw. Usability-Agentur haben wir mit kinetischer Typografie in der professionellen Webentwicklung ja einiges an Erfahrung und daher eine Auswahl an Möglichkeiten für euch zusammengestellt – natürlich jeweils mit einem Code Example. So könnt ihr euch den Effekt als visuelle Darstellung und parallel als Code ansehen.
Wenn etwas dabei ist, was euch gefällt und ihr für eure Website umgesetzt haben wollt: Ihr wisst ja, wie ihr uns erreichen könnt. Zwinker, zwinker.
Der Text erscheint nach und nach durch das Ausprobieren von Zeichen. Bei diesem ziemlich ungewöhnlichen Webdesign-Effekt werden sicher einige Beobachter an Agententhriller erinnert. Nur langsam schält sich die Botschaft des Textes aus der Vielzahl der Buchstaben.
Textanimationen sind ein echter Hingucker und ziehen Aufmerksamkeit auf sich. Es gibt spektakuläre Angebote – und dann gibt es diese Form, bei der der Text lediglich ‚leise‘ von vorn kommt.
Diese Fonts schleichen sich dezent von vorn heran. Das ist kein ‚Animationshammer‘, eher ein bescheidener Hinweis. Die Aristokratie dieser Text-Animationen weht leise, aber wirkungsvoll über das professionelle Webdesign.
Buchstaben erscheinen von unten – stehen – und verschwinden nach oben. Alles Gute kommt in diesem Fall von unten und geht nach oben, wie Grundwasser, das allmählich von unten durchsickert und durch die Wärme der Sonne langsam noch oben steigt.
Der Text switcht zwischen unterschiedlichen Wörtern. Wenn die ersten Worte feststehen und der Text dahinter auch, kommt es auf das mittlere Wort an, das den Sinn und die Intention der Sätze völlig verändert.
Diese Typo schwingt von vorn nach hinten und zurück. Das ist die Schriftanimation aus dem Club. Es flippt in vielen Farben schillernd und erinnert uns daran, dass es sich im Vaporwave-Webdesign sehr gut macht.
Die Buchstaben werden dicker. Dass aus dünn schnell beleibt wird, wissen wir seit dem ersten Lockdown. So ähnlich läuft es auch bei dieser Art, bei der der Text zunächst schmal beginnt, sich dann aber ganz schön breit(-)macht.
Wenn der kurze Text wirkt wie live eingetippt, sind wir beim Typing. Schnell mit einem Sound versehen oder koloriert wirkt er resolut und erinnert uns daran, dass da noch was Wichtiges ist, auf das wir klicken sollten.
Der Text rotiert in zwei Kreisen. Wenn das Große um das Kleine kreist, geht es nicht immer um Geld oder Zeit, sondern hier um ein Angebot der kinetischen Typografie, die sachte, aber kontinuierlich den Takt angibt.
Diese Sätze wirken wie live eingetippt und werden wieder gelöscht. Hat sich da jemand verschrieben? – Interactive Motion Design in Perfektion! Nichts ist sicher oder unmöglich beim Typing with Delete.
Der Text wirkt zunächst unscharf, doch durch das weitere Scrollen nach unten wird er wieder klar. Hm, hast du etwas mit den Augen? – Nein, das ist nur ein Interactive Motion Design für deine Website!
Wenn dieser Webtext nach vorn rauscht, muss sich niemand ducken. Er springt niemandem entgegen. Das ist nicht unbedingt das Title Design von ‚Star Trek‘, muss es für eine Website aber auch nicht unbedingt sein.
Diese Sätze vervollständigen sich selbst! Wie aus dem Nichts erscheint und vervollständigt sich der Text bei dieser kinetischen Textanimation. Sag Hallo, guten Morgen oder auch Tschüss und auf Wiedersehen! Irgendwie ein wenig unheimlich …
Kinetische Typografie ist ein Highlight auf einer gelungenen Website. Zum ästhetischen Aspekt kommen noch andere entscheidende Faktoren hinzu: Mit dem Interactive Motion Design, zu dem etwa Page Transitions, Scroll-Animationen und eben die kinetische Typografie gehören, leiten UI-/UX-Designer den User sicher und gezielt durch eine Website.
Diese Stilmittel werden nicht willkürlich, sondern mit Bedacht gewählt. Sie vermitteln Vertrauen und Kompetenz, erhöhen die Verweildauer, unterstützen das Ranking und festigen so langfristig den Erfolg einer Website.
In unserem Glossar (Wiki) könnt ihr noch mehr über kinetische Typografie erfahren und wo diese Typoanimationen eingesetzt werden, z. B. im Title Design von Filmen, in Lyric Videos oder in einer Logo-Animation.
Als Usability-Agentur programmieren wir dir eine individuelle kinetische Typografie für deine Website.
Du erreichst uns telefonisch unter +49 30 40045775 und wir freuen uns auf deine Message!
Hier findest du themenverwandte Artikel:
insights
insights