Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 11. April 2013

5 jQuery-Plugins, die Leben in Ihre Texte bringen

Texte sind zum Lesen da, sol­len bis­wei­len aber durch­aus auf­fal­len. Eine Reihe von jQuery-Plugins stel­len Möglichkeiten zur Verfügung, Texte mit Animationen und ani­mier­ten Hovereffekten in Bewegung zu brin­gen. Fünf schi­cke jQuery-Plugins für sol­che Texteffekte haben wir zusam­men­ge­stellt.

Sliding Letters: Text per Hover ändern

jquerytexteffekte_slidingletters

Das ers­te Plugin wech­selt per Hovereffekt einen Text per Animation aus. Der Standardtext wird dabei, wie üblich, mit einem A-Element aus­ge­zeich­net. Den Text, der beim Mouseover erschei­nen soll, gibt man über ein Data-Attribut an:

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

Anschließend wei­sen wir dem Plugin die ID des A-Elementes zu:

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

Es ste­hen ver­schie­de­nen Einstellungsmöglichkeiten zur Verfügung, um Geschwindigkeit und Art der Animation anzu­pas­sen. Die Buchstaben kön­nen par­al­lel oder nach­ein­an­der aus­ge­tauscht wer­den. Das Sliding-Letters-Plugin setzt neben jQuery das Easing-Plugin sowie Lettering.js vor­aus. Alle benö­tig­ten Dateien befin­den sich im Download-Paket.

Shuffle Letter Effects: Eine Hommage an klassische Anzeigetafeln

jquerytexteffekte_shuffletext

Das Shuffle-Letter-Effects-Plugin erin­nert an die klas­si­schen Anzeigetafeln, wie man sie etwa von Flughäfen kennt. Dabei „blät­tert“ die Anzeige für jeden Buchstaben solan­ge durch den Zeichensatz, bis der rich­ti­ge Buchstabe erreicht ist.

Das Plugin greift die­ses Prinzip auf und stellt einen Text ent­spre­chend dar. Die Anwendung ist ein­fach. Einem belie­bi­gen per HTML aus­ge­zeich­ne­tem Text wird per jQuery-Selektor der Effekt zuge­wie­sen:

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

Auf der Website des Anbieters gibt es übri­gens nicht nur das Plugin samt Demo, son­dern auch einen klei­nen Einblick in die Entwicklung des Plugin.

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

jquerytexteffekte_textillatejs

Textillate.js stellt zahl­rei­che Effekte zur Verfügung, um Texte ein- und aus­zu­blen­den. Über eine klei­ne Demo las­sen sich alle Effekte aus­pro­bie­ren. Da fal­len etwa die Buchstaben ein­zeln von oben her­ab oder rol­len sich in die auf­rech­te Position.

Das Plugin kann auch hier einem belie­bi­gen Textelement zuge­wie­sen wer­den:

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

Neben den ein­zel­nen Effekten für die Ein- und Ausblendung gibt es wei­te­re all­ge­mei­ne Optionen – bei­spiels­wei­se 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 wur­den dabei in einem Laufband dar­ge­stellt. Das News-Ticker-Plugin erweckt die­sen Klassiker per jQuery wie­der zum Leben. Dazu wer­den die ein­zel­nen Meldungen als Liste (UL-Element) aus­ge­zeich­net und per Plugin ent­spre­chend als Ticker dar­ge­stellt und ani­miert:

$("beispiel").ticker();

Als Besonderheit ermög­licht das Plugin die Darstellung eines RSS-Feeds als Ticker. Dazu wird eine RSS-Datei per Ajax gela­den:

 $("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 ger­ne sehr auf­fäl­lig haben möch­te, wird bei die­sem Plugin fün­dig. Das Text-Animation-Plugin geizt nicht mit auf­fäl­li­gen Effekten. Tanzende und blin­ken­de Buchstaben machen jeden Text unüber­seh­bar. Auch die­se Effekte las­sen sich leicht anwen­den:

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

Je nach Effekt gibt es wei­te­re Einstellungsmöglichkeiten für die Ausgestaltung der ein­zel­nen 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.

2 Kommentare

  1. Super so was habe ich schon gesucht

    vie­len Dank für Zusammenstellung

    —-Stooni

  2. Eine Anmerkung zum Newsticker; kürz­lich such­te ich einen “flie­ßen­den” end­los- Ticker, der auch für respon­si­ve Design geeig­net ist, also frei in der Breite varia­bel ist. Fand kei­nen; muß­te ihn sel­ber pro­gram­mie­ren. Alle Ticker, die ich fand sind pixel­ba­siert. Das Problem waren die Abfragen von Elementbreiten (outerWidth), die in den Browsern ver­schie­de­ne Werte aus­ge­ben.

Schreibe einen Kommentar zu Klaus Antworten abbrechen

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