TremulaJS: Diese animierte und zeitgemäße Bildergalerie hat mich begeistert

Wenn es darum geht, Bilder oder andere visuelle Daten für eine Website aufzubereiten, kannst du auf zahlreiche JavaScript-Bibliotheken, die aus einer losen Bildersammlung gestalterisch und funktionell ansprechende Galerien zaubern, zurückgreifen. Allseits beliebt ist zum Beispiel das Image-Carousel, bei dem die Bilder per Mausbewegung oder Wischgeste gewechselt werden. TremulaJS stellt ebenfalls ein sehr umfangreiches Framework zur Verfügung, mit dem du animierte Galerien erstellen und deren Optik sehr individuell konfigurieren kannst.

TremulaJS: Bilder als „Mountain“, „Turntable“ oder im Pinterest-Stil darstellen

Das Framework stellt verschiedene Darstellungsformen zur Verfügung, mit denen du deine Bilder präsentieren kannst. Sie gibt es zum Beispiel die „Mountain“-Ansicht, bei der Bilder kreisförmig angeordnet sind, dabei aber stets nur ein Ausschnitt des Kreises zu sehen ist. Somit sind die Bilder also nur in einem Bogen angeordnet, der als „Mountain“ bezeichnet wird. Eine andere Form der Darstellung ist das „Turntable“-Format. Hierbei werden Bilder von rechts beziehungsweise links ins Bild hinein geklappt. Auch eine klassische mehrspaltige Anordnung, wie man sie bei Pinterest kennt, ist möglich.

„Mountain“-Darstellung

Insgesamt stehen sechs verschiedene Möglichkeiten zur Verfügung, mit denen du deine Bilder in Form bringen kannst. Auf einer Demo-Seite werden die einzelnen Darstellungsformen sehr schön veranschaulicht.

„Turntable“-Darstellung

Zudem gibt es eine Vielzahl zusätzlicher Einstellungsparameter, mit denen du das Aussehen deiner Galerie noch anpassen kannst. So kannst du die Darstellungsgröße der Bilder anpassen, sowie die Anzahl der Zeilen und Spalten. Auf diese Weise kann das „Mountain“-Format nicht nur aus nebeneinander auf einem Kreis angeordneter Bilder bestehen, sondern zusätzlich aus untereinander angeordneten Bildern. Hierdurch lassen sich formatfüllende Galerien erzeugen, die zudem noch responsiv sind.

Pinterest-Darstellung

Animationen mit Impuls

Neben den verschiedenen Darstellungsformen glänzt TremulaJS durch beeindruckende Animationseffekte. Per Mausbewegung oder Wischgeste wird die Galerie in Bewegung gebracht. Je nach Darstellungsform werden Bilder auf einem Kreis („Mountain“) gedreht oder ins Bild geklappt („Turntable“) oder einfach horizontal beziehungsweise vertikal bewegt.

Während bei solchen Animationseffekten häufig nur die Mausbewegung oder Gester eins zu eins umgesetzt wird, simuliert TremulaJS physikalische Impulskräfte, um eine natürlich anmutende Bewegung zu erzeugen. Wird also mit viel „Schwung“ per Geste oder Maus-Drag die Galerie in Bewegung gebracht, wird entsprechend schnell und weit animiert. Erst langsam kommt die Animation wieder zum Stehen.

Mit der „Mountain“-Ansicht erreichst du einen ähnlichen Effekt, wie er beim Drehen eines Rades eintritt. Durch die Simulation physikalischer Kräfte ist die Navigation durch eine Galerie sehr intuitiv und die Animationen zeigen sich sehr angenehm in der Wahrnehmung.

Unendlich viele Bilder laden dank JSON

Die einzelnen Bilder einer Galerie werden bei TremulaJS nicht im HTML-Quelltext ausgezeichnet, sondern über das Framework per JSON-Objekt geladen. Im HTML-Body wird lediglich ein „<div>“-Element ausgezeichnet, welches als Platzhalter für die Galerie dient.

So kannst du beispielsweise die Flickr-API nutzen, um Bilder per JSON zu laden und in einer eigenen Galerie darzustellen. Da die Bilder nicht fest im Quelltest verankert sind, müssen auch nicht alle Bilder der Galerie auf einmal geladen werden. So gibt es die Möglichkeit, Bilder sukzessive nachzuladen. Galerien mit hunderten Bildern stellen daher kein Problem dar.

In der Demo zu TremulaJS sieht man sehr schön, wie flüssig auch bei vielen zu ladenden Bildern selbst schnelle Bewegungen sauber ausgeführt werden.

TremulaJS: Komplexe JavaScript-Struktur und einige Abhängigkeiten

Anders als es bei vielen anderen Galerie-Bibliotheken der Fall ist, ist die Anwendung von TremulaJS nicht mit einigen wenigen eigenen Zeilen JavaScript getan. Der Aufwand ist doch etwas höher.

Zunächst wird das HTML-Element, in welches die Galerie platziert werden soll, übergeben. Die vielen Konfigurationsparameter werden über eine Objektliteral definiert.

Bearbeitbarer Quelltext in CodePen

Das Laden der Bilder erfolgt über eigene Funktionen, die individuell programmiert werden. Daher stelle ich dir an dieser Stelle auch keine Code-Snippets vor. Allerdings gibt es auf CodePen eine recht einfache Demo, die das Laden von Flickr-Bildern zeigt. Hier kannst du dich ganz gut in das Framework einarbeiten und selbst herumprobieren.

Außerdem existiert ein gut dokumentiertes Beispiel zum Herunterladen, welches HTML-, CSS- und JavaScript-Datei beinhaltet.

Die Komplexität von TremulaJS spiegelt sich auch in den Abhängigkeiten von anderen Bibliotheken wider. So setzt das Framework jQuery, Hammer.JS und jsBezier voraus. Während Hammer.js für die Umsetzung der Wischgesten auf Mobilgeräten verantwortlich ist, wird jsBezier benötigt, um die Animation auf Kurven wie beispielsweise dem Kreis bei der „Mountain“-Ansicht zu realisieren.

Fazit

TremulaJS ermöglicht formatfüllende Galerien, die dank schicker und natürlich wirkender Animationen Spaß machen. Der Einsatz ist mit etwas Aufwand verbunden, der sich aber ganz klar lohnt, wenn man mehr möchte, als nur ein klassisches Image-Carousel oder ähnliches.

TremulaJS wird von Garris Shipon & Art.com Labs gepflegt. Es steht auf Github unter der liberalen MIT-Lizenz zum Download bereit und darf sowohl für private, wie kommerzielle Projekte, ebenso für Auftragsarbeiten verwendet werden.

(dpe)