201115Apr

jQuery: Plugin für diagnoale Überblendungen

Für die Überblendung und Animation von mehreren Bildelementen auf einer Website gibt es viele Möglichkeiten. Sollen sehr viele Elemente übergeblendet werden, kann die Animation schon komplexer werden. Eine schöne Idee stellt die diagonale Überblendung dar, die Jono Brandel als jQuery-Plugin veröffentlicht hat. Das kleine Skript blendet eine Reihe von Containern automatisch in die gewünschte Richtung ab.

diagonalFade - A jQuery plugin

Das Skript bietet dabei einige Einstellungen, die sich wie gehabt beim Aufruf des Plugins definieren lassen:

  • $("#container").diagonalFade({
  • time: 100,
  • fadeDirection_x: "left-right",
  • fadeDirection_y: "top-bottom",
  • fade: "out",
  • complete: null
  • });

So lassen sich Zeit, Art der Überblendung sowie Start- und Zielrichtung des Effekts einstellen. Weiterhin kann ein Callback aufgerufen werden, sobald die Überblendung abgeschlossen ist.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong

Kommentare

Mario Kober schrieb am 15.04.2011 #1

Sehr hübsch – vielen Dank. Habs schon desöfteren so ähnlich gesehen, aber meist handgecodet. Als PlugIn ist das hier wieder ganz jQuery-like sehr entspannt.