201106Sep

Slicebox: jQuery Image Slider mit CSS3-3D-Effekten

Sie heißen Slideshows, Image Slider oder Carousels: Skripte, mit denen sich interaktiv Bilderreihen ansehen und durchblättern lassen, gibt es mittlerweile mehr als genug. Daher überzeugen aktuelle Projekte dieser Art wie der Flux Slider mit neuartigen Effekten und Übergängen (Transitions).
Ein weiterer Image Slider, der in Form eines jQuery-Plugins vorliegt und mit CSS3-3D-Effekten überrascht, ist die Slicebox von Codrops: Das Skript ist ein sehr gutes Beispiel dafür, wofür sich CSS3 einsetzen lässt.

Slicebox - A fresh 3D image slider with graceful fallback

Die Transformationen sind so angelegt, dass ein virtueller Quader in einzelne Streifen aufgeteilt und anschließend um 90° gedreht wird. Das erscheinende Bild hängt dadurch mit der aktuell gezeigten Grafik zusammen. Betrachten lässt sich die Animation auf der Demo-Seite.
Die Bilder müssen für den Image Slider als img-Elemente innerhalb eines Containers (div) angelegt sein. Ein Beispiel mit allen möglichen Optionen:

  • $("#sb-slider").slicebox({
  • orientation: "v",
  • perspective: 1200,
  • slicesCount: 5,
  • disperseFactor: 0,
  • colorHiddenSides: "#222",
  • sequentialRotation: false,
  • sequentialFactor: 0,
  • speed3d: 800,
  • speed: 600,
  • fallbackEasing: "easeOutExpo",
  • slideshow: false,
  • slideshowTime: 2000
  • });

Aktuell funktionieren die CSS3-3D-Transformationen lediglich in Google Chrome und Safari. In anderen Browsern kommt ein Fallback zum Tragen, das auch ohne 3D-Effekte eine gute Figur macht.

Kommentarfunktion für diesen Artikel geschlossen.