Denis Potschien 13. Januar 2015

Typografische Animationen ganz einfach: Texte manipulieren mit „Blast.js“ und jQuery

Mit CSS und JavaScript hat man Zugriff auf jedes Element eines HTML-Dokumentes – natürlich auch auf Texte. Allerdings beschränkt sich der Zugriff dabei auf Überschriften und Absätze. Einzelne Sätze oder Wörter lassen sich nicht ohne Weiteres ansprechen; es sei denn, sie sind beispielsweise mit je einem „<span>“-Element umschlossen. Die JavaScript-Bibliothek „Blast.js“ sorgt dafür, dass Sätze, Wörter und einzelne Zeichen per CSS und JavaScript angesprochen werden können. So entsteht eine gute Grundlage für beeindruckende typografische Animationen.

explosion-147909_640

So funktioniert „Blast.js“

„Blast.js“ stammt aus der digitalen Feder des Machers von „Velocity.js“, Julian Shapiro aus San Francisco und steht zur kostenlosen Nutzung in kommerziellen und persönlichen Projekten unter der MIT-Lizenz zur Verfügung. Die Verwendung ist nicht sonderlich schwierig, aber einigermaßen erklärungsbedürftig.

Da „Blast.js“ auf jQuery aufsetzt, muss dieses zusammen mit „Blast.js“ im HTML-Dokument eingebunden sein. Anschließend kann sehr einfach ein Text so aufbereitet werden, dass jeder Satz, jedes Wort oder jedes Zeichen per CSS oder JavaScript angesprochen werden kann.

$("p").blast({
  delimiter: "word"
});

Im Beispiel werden alle Wörter innerhalb von „<p>“-Elementen mit einem „<span>“-Element umschlossen. Diese „<span>“-Elemente erhalten alle die Klasse „blast“. Die Eigenschaft „delimiter“ kennt noch die Werte „sentence“, um Sätze mit einem „<span>“ zu umschließen und „character“, um einzelne Zeichen zu umschließen – einschließlich Satzzeichen. Werden innerhalb eines Textes bereits „<span>“-Elemente verwendet, wirkt sich dies nicht negativ auf die Verwendung von „Blast.js“ aus.

Wer ein anderes Element zum Umschließen einsetzen möchte, kann über die Einstellung „tag“ ein eigenes Element angeben, welches anstelle von „<span>“ verwendet werden soll. Allerdings ist das „<span>“-Element im Allgemeinen schon die richtige Wahl, da es keine semantische Funktion hat.

Bei Sätzen werden Punkt, Ausrufe- und Fragezeichen als Satzende definiert. Zwar erkennt „Blast.js“ auch Punkte nach Abkürzungen und interpretiert diese nicht als Satzende; dies gilt allerdings nur für englische Abkürzungen. So wird „e.g.“ nicht als Satzende interpretiert, „z. B.“ hingegen schon.

Um manuell ein falsches Satzende zu vermeiden, zeichnet man den Punkt als ASCII-Code in zwei geschwungenen Klammern aus.

<p>Das ist z{{046}} B{{046}} ein Satz.</p>

„Blast.js“ sorgt dafür, dass die Punkte korrekt dargestellt, sie aber nicht fälschlicherweise als Satzende interpretiert werden.

Will man Zugriff auf bestimmte Wörter innerhalb eines Textes haben, lässt sich für jedes Wort eine eigene Klasse vergeben, die das Wort im Klassennamen trägt.

$("p").blast({
  delimiter: "word",
  generateValueClass: true
});

Setzt man die Eigenschaft „generateValueClass“ auf „true“, lassen sich per CSS oder JavaScript einfach alle gleichlautenden Wörter hervorheben.

<p>
  <span class="blast blast-word-ich">Ich</span>
  <span class="blast blast-word-mache">mache</span>
  <span class="blast blast-word-sachen">Sachen</span>
</p>

Im Beispiel wird neben der Klasse „blast“ noch die weitere Klasse „blast-word-…“ vergeben. Per CSS ließe sich somit jedes „Ich“ eines Textes hervorheben. Bei der Vergabe der Klassen wird zwischen Groß- und Kleinschreibung nicht unterschieden. Allerdings landen Sonderzeichen wie Umlaute und Eszett sowie Ziffern in den Klassen.

blastjs

Hier muss berücksichtigt werden, dass Klassennamen nur aus ASCII-Buchstaben und Zahlen bestehen und nicht mit einer Zahl beginnen dürfen. Das heißt, nicht alle Klassennamen, die „Blast.js“ vergibt, sind automatisch erlaubt. Manuelle Nacharbeit kann erforderlich sein.

Um Sätze oder Wörter anhand ihrer Position innerhalb eines Textes zu ermitteln, lassen sich auch IDs für jedes „<span>“-Element erstellen. Dies ist über die Eigenschaft „generateIndexID“ zusammen mit „customClass“ möglich.

$("p").blast({
  delimiter: "word",
  generateIndexID: true,
  customClass: "text"
});

Im Beispiel erhält jedes umschlossene Wort eine ID, welche aus dem in „customClass“ definierten Klassennamen sowie einer fortlaufenden Nummer zusammengesetzt wird. Zusätzlich wird die Klasse als solche auch in die „<span>“-Elemente gesetzt.

<p>
  <span class="blast text" id="text-1">Ich</span>
  <span class="blast text" id="text-2">mache</span>
  <span class="blast text" id="text-3">Sachen</span>
</p>

Auf diese Weise können konkrete Wörter, Sätze und Zeichen anhand ihrer ID angesprochen werden.

Um alle per „Blast.js“ gemachten Änderungen am Quelltext wieder rückgängig zu machen, genügt der Aufruf von „blast(false)“.

$("p").blast(false);

Im Beispiel werden alle Änderungen an „<p>“-Elementen rückgängig gemacht.

Text durchsuchen

Neben der bloßen Auszeichnung einzelner Textabschnitte bietet „Blast.js“ auch die Möglichkeit, Texte nach bestimmten Wortphrasen zu durchsuchen. In diesem Fall werden innerhalb des Textes nur die Suchergebnisse mit einem „<span>“-Element umschlossen.

$("p").blast({
  search: "Sachen"
});

Im Beispiel wird jedes Vorkommen des Wortes „Sachen“ umschlossen. Eine Unterscheidung zwischen Groß- und Kleinschreibung findet nicht statt. Die Eigenschaft „delimiter“ wird ignoriert, wenn „search“ verwendet wird.

Statt einen Suchbegriff vorzugeben, kann man per Eingabefeld oder „prompt()“-Methode nach benutzerdefinierten Wortphrasen suchen.

var suchwort = prompt("Wonach wollen Sie suchen?");

$("p").blast({
  search: suchwort
});

Die Suchergebnisse lassen sich per Stylesheets einfach hervorheben – ideal für eine individuelle Suche auf der eigenen Website.

Barrierefreiheit dank ARIA

Wenn alle Wörter eines Textes oder gar alle Zeichen mit einem eigenen Element umschlossen werden, ist das für die Barrierefreiheit nicht sehr förderlich. Dank der Verwendung von „aria“-Eigenschaften sorgt „Blast.js“ jedoch dafür, dass ein Text dennoch barrierefrei bleibt.

Dies wird erreicht, indem der Text ohne die umschließenden Elemente per „aria-label“ dem Elternelement zugewiesen wird. Die einzelnen umschlossenen Sätze, Wörter oder Zeichen werden per „aria-hidden“ für Screenreader versteckt.

Wer auf Barrierefreiheit und die ARIA-Auszeichnung verzichten will, kann den Parameter „aria“ im „blast()“-Aufruf auf „false“ setzen.

Animationen zusammen mit „Velocity.js“

Zusammen mit der JavaScript-Bibliothek „Velocity.js“, die vom selben Entwickler stammt, lassen sich schicke Animationen auf Texte anwenden. So kann man Wörter oder Zeichen, die mit „Blast.js“ separiert wurden, beispielsweise per Fade-In einblenden.

$("p").blast().velocity("fadeIn", {
  duration: 500
  stagger: 250
});

Das Beispiel blendet alle „<span>“-Elemente nacheinander innerhalb einer halben Sekunde („duration“) ein. Zwischen jedem einzublendenden Element wird ein zeitlicher Versatz von einer Viertelsekunde („stagger“) eingefügt.

„Velocity.js“ stellt eine ganze Reihe weiterer Animationseffekte zur Verfügung. Neben Fade-In- sind beispielsweise auch Slide-Up-Effekte möglich, welche die einzelnen Elemente von unten nach oben animieren.

Browsersupport und Links zum Beitrag

„Blast.js“ läuft in allen gängigen Browsern. Auch der Internet Explorer 6 wird noch unterstützt. Die Bibliothek wird unter der MIT-Lizenz bereitgestellt und kann somit kostenfrei für eigene Projekte eingesetzt werden.

(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 zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

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