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.

Kommentare

David schrieb am 06.09.2011 #1

Woah… das ist einfach nur faszinierend. =O

Hajo schrieb am 07.09.2011 #2

Hallo!

Wenn ich das Einbaue, funzt es mit den Effekten nur unter Safari und Chrome.
Der IE 9 schweigt bis auf Bsp. 1 & 2 (normal) mit der ganzen Galerie überhaupt.
Kann man davon ausgehen das zeitnah die anderen Browser nachziehen werden?
Was meint ihr?

Lg

Matthias schrieb am 09.09.2011 #3

Die Effekte funktionieren nur unter Safari und Chrome, weil es Webkit-Effekte sind. Browser mit der Gecko- oder Trident-Engine unterstützen derartige Transformationen noch nicht und es ist noch etwas ungewiss, wann es soweit sein wird. Laut dieser Tabelle soll es in Internet Explorer 10 möglich sein, aber bei Firefox ist es noch unbekannt.
Durch CSS-2D-Transformationen lassen sich dennoch Pseudo-3D-Effekte erzeugen, siehe hier ;-)

g.skyarts schrieb am 12.09.2011 #4

Geht wohl nicht in jedem Chrom so wie’s aussieht ;-)
Aber nette Spielerrei und schöner Effekt. Denn noch finde ich sollte das ganze doch überall Realisierbar sein – damit jeder in diesen Genuss kommen kann bevor man diesen Effekt in die Seite mit einbezieht :-)