200916Nov

jQuery: Reflektionen von Bildern erzeugen

Für Bildeffekte auf Websites bietet sich JavaScript sehr gut an und mittlerweile gibt es etliche Skripte und Bibliotheken, um eine Seite grafisch aufzuwerten. Ein beliebter Effekt stellt die Reflektion oder Spiegelung von Bildern dar — dezent eingesetzt kann man damit bestimmte Elemente einer Website schön in Szene setzen. Hierfür existieren bereits diverse Scripts und Lösungen. Ein entsprechendes Plugin wurde vor einiger Zeit für jQuery veröffentlicht und hat eine Größe von 2 KB. Das Script "Reflection.js for jQuery" erfüllt seinen Zweck und ist zudem einfach zu implementieren.

Reflection.js for jQuery

Angewendet wird der Effekt auf Bilder mit der Klasse "reflect" oder über folgenden Code:

  • $("#id").reflect({ height: 0.3, opacity: 0.5 });

Die beiden Optionen "height" und "opacity" können nach Belieben angepasst werden. Das kleine Script funktioniert in allen gängigen Browsern (inklusive Internet Explorer 6) und arbeitet mit der canvas-Technik. In Microsoft-Browsern wird auf die "DXImageTransform"-Funktion ausgewichen.
Übrigens stellt der Autor das Script auch für MooTools bereit. Die Skripte basieren auf Reflection.js (Standalone-JavaScript) und auch für Script.aculo.us ist eine derartige Funktionalität erhältlich.

RSS-Feed abonnieren Bookmark bei Del.icio.us