Denis Potschien 11. April 2013

5 jQuery-Plugins, die Leben in Ihre Texte bringen

Texte sind zum Lesen da, sollen bisweilen aber durchaus auffallen. Eine Reihe von jQuery-Plugins stellen Möglichkeiten zur Verfügung, Texte mit Animationen und animierten Hovereffekten in Bewegung zu bringen. Fünf schicke jQuery-Plugins für solche Texteffekte haben wir zusammengestellt.

Sliding Letters: Text per Hover ändern

jquerytexteffekte_slidingletters

Das erste Plugin wechselt per Hovereffekt einen Text per Animation aus. Der Standardtext wird dabei, wie üblich, mit einem A-Element ausgezeichnet. Den Text, der beim Mouseover erscheinen soll, gibt man über ein Data-Attribut an:

<a href="#" id="beispiel" data-hover="Magazin">Dr. Web</a>

Anschließend weisen wir dem Plugin die ID des A-Elementes zu:

$("#beispiel").hoverwords();

Es stehen verschiedenen Einstellungsmöglichkeiten zur Verfügung, um Geschwindigkeit und Art der Animation anzupassen. Die Buchstaben können parallel oder nacheinander ausgetauscht werden. Das Sliding-Letters-Plugin setzt neben jQuery das Easing-Plugin sowie Lettering.js voraus. Alle benötigten Dateien befinden sich im Download-Paket.

Shuffle Letter Effects: Eine Hommage an klassische Anzeigetafeln

jquerytexteffekte_shuffletext

Das Shuffle-Letter-Effects-Plugin erinnert an die klassischen Anzeigetafeln, wie man sie etwa von Flughäfen kennt. Dabei „blättert“ die Anzeige für jeden Buchstaben solange durch den Zeichensatz, bis der richtige Buchstabe erreicht ist.

Das Plugin greift dieses Prinzip auf und stellt einen Text entsprechend dar. Die Anwendung ist einfach. Einem beliebigen per HTML ausgezeichnetem Text wird per jQuery-Selektor der Effekt zugewiesen:

$("#beispiel").shuffleLetters();

Auf der Website des Anbieters gibt es übrigens nicht nur das Plugin samt Demo, sondern auch einen kleinen Einblick in die Entwicklung des Plugin.

textillate.js: Zahlreiche Animationen zur Textein-/-ausblendung

jquerytexteffekte_textillatejs

Textillate.js stellt zahlreiche Effekte zur Verfügung, um Texte ein- und auszublenden. Über eine kleine Demo lassen sich alle Effekte ausprobieren. Da fallen etwa die Buchstaben einzeln von oben herab oder rollen sich in die aufrechte Position.

Das Plugin kann auch hier einem beliebigen Textelement zugewiesen werden:

$("#beispiel").textillate({
  in: {
    effect: "rollIn"
  }
});

Neben den einzelnen Effekten für die Ein- und Ausblendung gibt es weitere allgemeine Optionen – beispielsweise für die Dauer der Einblendung und für die Animation im Loop.

News-Ticker: Der Klassiker

jquerytexteffekte_newsticker

Früher waren News-Ticker ein Klassiker auf Websites. Nachrichtenmeldungen wurden dabei in einem Laufband dargestellt. Das News-Ticker-Plugin erweckt diesen Klassiker per jQuery wieder zum Leben. Dazu werden die einzelnen Meldungen als Liste (UL-Element) ausgezeichnet und per Plugin entsprechend als Ticker dargestellt und animiert:

$("beispiel").ticker();

Als Besonderheit ermöglicht das Plugin die Darstellung eines RSS-Feeds als Ticker. Dazu wird eine RSS-Datei per Ajax geladen:

 $("beispiel").ticker({
  htmlFeed: false,
  ajaxFeed: true,
  feedUrl: "http://example.com/rss.xml",
  feedType: "xml"
});

Text-Animation: Hier ist viel Bewegung drin

jquerytexteffekte_textanimation

Wer es gerne sehr auffällig haben möchte, wird bei diesem Plugin fündig. Das Text-Animation-Plugin geizt nicht mit auffälligen Effekten. Tanzende und blinkende Buchstaben machen jeden Text unübersehbar. Auch diese Effekte lassen sich leicht anwenden:

$("#beispiel").textAnimation({
  mode: "roll"
});

Je nach Effekt gibt es weitere Einstellungsmöglichkeiten für die Ausgestaltung der einzelnen Animationen.

Links zum Beitrag

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
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.

2 Kommentare

  1. Super so was habe ich schon gesucht

    vielen Dank für Zusammenstellung

    —-Stooni

  2. Eine Anmerkung zum Newsticker; kürzlich suchte ich einen „fließenden“ endlos- Ticker, der auch für responsive Design geeignet ist, also frei in der Breite variabel ist. Fand keinen; mußte ihn selber programmieren. Alle Ticker, die ich fand sind pixelbasiert. Das Problem waren die Abfragen von Elementbreiten (outerWidth), die in den Browsern verschiedene Werte ausgeben.

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.