200930Nov

CrossSlide: jQuery-Slideshow mit Ken Burns-Effekt

Zu einer modernen Präsentation im Netz gehört eine zeitgemäße Bilderwelt. Die Einsatzgebiete dafür reichen vom Unternehmensprofil über Produktfotos bis hin zu abstrakten Abbildungen, die zur Auflockerung der Textwüste genutzt werden können. Animierte Slideshows bringen eine gute Dynamik auf eine Website und bieten zudem die Möglichkeit, mehrere Bilder auf einer Seite zu verwenden, ohne dabei viel Platz zu beanspruchen. Bilderreihen sollten dezent animiert sein und dem Betrachter genügend Zeit geben, das jeweilige Bild zu verarbeiten.
Ein sehr schöner Effekt, der unter Anderem auch in Apples Mac OS X Verwendung findet, stellt der Ken Burns-Effekt dar. Diesen Effekt bietet zum Beispiel das jQuery-Plugin CrossSlide, welches Bilder elegant ineinander überblenden lässt.

TYPO3 - Backend

Das Plugin leistet gute Arbeit und bietet neben dem Ken Burns-Übergang auch statische Animationen oder einfache Überblendungen an. Bei den Parametern ist es zudem möglich, die Hintergrundposition (background-position) der Bilder sowie einen Vergrößerungsfaktor zu definieren. Auf der Website des Plugins findet sich die entsprechende Dokumentation.
Das Script kann nach der Einbettung der Bibliothek genutzt werden wie folgt:

  • $("#id").crossSlide({
  • speed: 30,
  • fade: 1
  • },
  • [
  • { src: "bild1.jpg", dir: "up" },
  • { src: "bild2.jpg", dir: "down" }
  • ]
  • );

Das Zielelement (#id), in dem die Bilder platziert und animiert werden, sollte eine fest Größe haben. Weiterhin können die bewegten Bilder auch mit einem Link verknüpft werden.