Dieter Petereit 12. Oktober 2017

Tool-Tipp: Moving Letters mit Anime.js und CSS

Animierte Schriften sind ein Hingucker. Richtig eingesetzt, können sie ein Design aufwerten. Moving Letters stellt dir 16 fantastische Effekte bereit.

Der schwedische Designer und Entwickler Tobias Ahlin hat einen imposanten Backlog an Referenzen. Zunächst zeichnete er als einer der ersten Mitarbeiter von Spotify für deren Design verantwortlich. Heutzutage entwickelt er bei Mojang fleißig an Minecraft mit. Daneben schmeißt er immer mal wieder kleinere und größere Side-Projects in die Menge, wie der Kölner Prinz die Kamelle.

Bewegte Buchstaben mit einfachen Mitteln

Sein Open-Source-Projekt Moving Letters etwa ist eine wachsende Sammlung mit animierten Texteffekten. Tobias setzt dabei auf CSS und JavaScript, unter Unterstützung durch die Animations-Engine Anime.js.

Code-Schnipsel zum Mitnehmen. (Screenshot: Dr. Web)

Dabei ist die Website zum Projekt selbst schon ein imposantes Design-Stück, das es an Animation nicht mangeln lässt. Auf der Landing Page findest du alle Efffekte schön übersichtlich aufgereiht. Per Klick auf einen Text öffnet sich die jeweilige Detailansicht, die dann neben dem optischen Effekt auch die erforderlichen Code-Schnipsel in HTML, CSS und JavaScript bereithält. So baust du den jeweiligen Effekt ganz simpel per Copy und Paste in deinen eigenen Projekte nach.

Ahlin liefert weitere nützliche Tools für Webentwickler

Tobias stellt den Code unter der liberalen MIT-Lizenz zur Verfügung. Deshalb kannst du ihn frei, auch in Kundenprojekten, verwenden. Tobias Ahlin kennst du vielleicht schon von seinen anderen beiden, ähnlichen Projekten SpinKit und TypeSource. MIt dem SpinKit stellt er in gleicher Weise animierte Zustandsanzeiger vor, während TypeSource eine Inspirationsquelle für die Verwendung von Google Webfonts ist.

Alle drei Projekte haben sich einen Bookmark in des Designers Toolbox verdient.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück