Typed jQuery Animation – Schreiben auf Website animieren

  • 1
  • 24. Juni 2015

Auf vielen Websites finden sich optisch ansprechende Animationen, die den Blick des Besuchers lenken und somit bestimmte Ziele der Website unterstützen – z.B. den Verkauf Ihres E-Books. Heute möchten wir Ihnen Typed.js vorstellen: Dies ist eine jQuery Bibliothek mit der man Texte so darstellen kann, als würden sie zeitgleich eingetippt werden.

Installation & Konfiguration

Bevor das Gestalten mit Typed.js losgehen kann, muss sichergestellt werden, dass jQuery auf dem Server installiert ist und auch auf der Seite, wo die Schrift-Animation angezeigt werden soll, geladen wird. Auch das Typed.js Skript muss auf der Seite der anzuzeigenden Animation geladen werden. Das ganze kann dann in etwa so aussehen:

<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>
...
<span class="element"></span>

Je nach Vorlieben bei der Entwicklung kann Typed.js auch über den header/footer geladen werden, jedoch sollte man abwägen, ob diese Datei wirklich auf jeder Seite bereitgestellt werden sollte.

Im Live-Betrieb sieht die oben genannte Funktion dann so aus:

Bisher sieht der animierte Text noch nicht sehr spektakulär aus. Hierfür besteht die Möglichkeit, z.B. den Cursor (und auch andere Elemente) per CSS zu stylen. Somit können wir unsere ausgeschriebene Nachricht visuell noch ansprechender gestalten.

Jetzt haben wir eine individualisierte Animation erstellt, mit welcher wir besondere Aufmerksamkeit auf bestimmte Seitenelemente lenken können. Der Text kann z.B. auch auf Werbe-Banner, Bilder oder andere Seitenelemente geschrieben werden um am Ende das eigentliche Ziel der Website zu unterstützen.

Fazit

Insgesamt ist Typed.js eine schlanke aber vielseitige Bibliothek zum Animieren von Texten auf der Website. Die hier gezeigten Umsetzungen sind natürlich nur die Spitze des Eisbergs – so lässt Typed.js z.B. zu, extra Funktionen vor, während, und/oder nach der Anzeige des Textes auszuführen, was z.B. sehr gut als Ladeanimation, oder wie hier als 404-Seite genutzt werden könnte.

Sollten auch Sie Interesse an animierten Textelementen haben, kontaktieren Sie uns per Mail unter kontakt@mewigo.de oder per Telefon: +49 (0)30 602 682 11

Autor Diego Hinz

Diego Hinz ist Inhaber der WordPress Agentur und Werbeagentur MEWIGO. Seine persönlichen Stärken liegen im Bereichen WordPress, Grafik, Druck und Außenwerbung. Zudem gibt er sein Wissen als WordPress Experte in WordPress-Schulungen und bei WordPress Meetups an Kunden/Interessenten weiter.

Weitere News von Diego Hinz
KONTAKT
Bänschstraße 37 |10247 Berlin
Tel. 030 / 602 682 11
E-Mail: kontakt@mewigo.de
PGlmcmFtZSBzcmM9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vbWFwcy9lbWJlZD9wYj0hMW0xNCExbTghMW0zITFkOTcxMS4yNjgzOTg2MTM1MDkhMmQxMy40NjM3ODghM2Q1Mi41MTg2NDkhM20yITFpMTAyNCEyaTc2OCE0ZjEzLjEhM20zITFtMiExczB4MCUzQTB4NTY3ZDg4YjY1MTdjY2UwZiEyc01FV0lHTytXZXJiZWFnZW50dXIhNWUwITNtMiExc2RlITJzZGUhNHYxNDE4MzMxNTg1OTk0IiBzdHlsZT0iYm9yZGVyOiAwcHggbm9uZTsgdmlzaWJpbGl0eTogdmlzaWJsZTsgb3BhY2l0eTogMTsiIGZyYW1lYm9yZGVyPSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIj48L2lmcmFtZT4=
Vielen Dank. Wir werden uns so schnell wie möglich bei Ihnen melden.