Wobble window jQuery plugin

Es gibt unzählige Tutorials und Code Snippets mit denen man HTML-Elemente „wobblen“ lassen kann. In den meisten Fällen geht es aber eher darum Elemente zu schütteln, bzw. einen shake-Effekt anzuwenden.
Ich wollte allerdings einen wobble-Effekt schreiben, der sich auf die Form von einem DIV bezieht.  Genauer gesagt, ein Effekt der die Form von einem DIV beeinflusst. Das Ganze abhängig von der Mausposition. So entstand das „Wobble window jQuery Plugin“. Über diverse optionale Parameter könnt ihr mit Hilfe vom „Wobble window jQuery Plugin“ einen Hintergrund für ein beliebiges DIV erzeugen, welcher seine Form abhängig von der Mausposition verändert. Der Hintergrund wobblet/wabert und so entsteht ein interessanter Effekt der an eine Flüssigkeit erinnert.
Zuerst gesehen hatte ich diesen Effekt bei Paul Neave. Damals, genauer gesagt 2006, hatte ich den Effekt in Flash nachgebaut. Und jetzt war es endlich mal an der Zeit den Effekt in HTML5 zu überführen und dabei auch für andere Entwickler nutzbar zu machen. Daher die Idee mit dem jQuery Plugin.
Zum Einsatz kommen das Canvas Element und JavaScript. Dadurch sollte sichergestellt sein, dass auch ältere Browser in der Lage sind diesen Effekt darstellen zu können. Mit 3 KB im Zip-Format ist das Plugin recht schlank geworden. So entstehen keine langen Ladezeiten und euer Traffic geht nicht durch die Decke.
Wie bei meinen anderen jQuery Plugins auch könnt ihr diesen Effekt aber auch ohne jQuery auf eure Elemente anwenden.
Ich zeige euch erst ein paar Beispiele (Zu jedem Beispiel könnt ihr euch den Code anschauen). Danach gehe ich noch etwas konkreter auf den Code ein, damit ihr das „Wobble window jQuery Plugin“ direkt nutzen könnt.

Beispiel 1:
view source

Beispiel 2:
view source

Beispiel 3:
view source

Beispiel 4:
view source

Beispiel 5:
view source

Beispiel 6:
view source

Und hier nun ein paar Beispiele wie ihr das in eurer Webseite einbinden könnt. Zunächst einmal müsst ihr die JS Dateien in eure Seite einbinden:

Danach könnt ihr direkt starten. Mit jQuery sieht das wie folgt aus:

$( '#window' ).wobbleWindow();

Und so ohne jQuery:

var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ) );

Natürlich könnt ihr noch diverse Parameter an das Plugin übergeben um den Effekt zu individualisieren. Ein solches Objekt zu erstellen ist optional, aber hier der Vollständigkeit wegen das Objekt mit allen möglichen Parametern:

var settings = {

    name: 'my_window',//name
    depth: 1,//depth for zIndex
    offsetX: 0,//+ or - value the size of the div
    offsetY: 0,//+ or - value the size of the div
    moveTypeIn: 'move',//method points follow the mouse
    moveTypeOut: 'wobble',//method points go back to init position
    wobbleFactor: 0.9,//control the wobble effect
    wobbleSpeed: 0.1,//control the wobble speed
    moveSpeed: 3,//control the move speed
    lineWidth: 1,//lineWidth
    lineColor: '',//no value = no line. Use hex/rgba values
    bodyColor: '#FFF',//no value = no body color. Use hex/rgba values
    numberOfXPoints: 7,//quantity of points horizontal. must be an odd int
    numberOfYPoints: 5,//quantity of points vertical. must be an odd int
    movementLeft: true,//enable/disable movement directions
    movementRight: true,//enable/disable movement directions
    movementTop: true,//enable/disable movement directions
    movementBottom: true,//enable/disable movement directions
    autoResize: true,//if true size will be automatically adjusted
    autoResize: true,//enable/disable automatic size adjustement
    debug: false//enable/disable debug mode

};

Wollt ihr das Plugin mit Parametern starten, dann sieht der Aufruf mit jQuery wie folgt aus

$( '#window' ).wobbleWindow( settings );

Und so ohne jQuery:

var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ), settings );

Downloads

Das wars schon. Bleibt mir nur noch euch viel Spaß zu wünschen und die Download Links anzubieten. Die jquery.wobblewindow.min.js, wie hier in den Beispielen verwendet. Die jquery.wobblewindow.js, falls ihr am Code interessiert seid und die jquery.wobblewindow.min.js.zip als Zip.



GitHub

Und hier geht´s zum GitHub Repository. Hier findet ihr immer die aktuelle Version und weitere Tutorials sowie Links.

Wie immer gilt: Falls ihr Fragen oder Anregungen habt, dann hinterlasst einfach einen Kommentar oder schreibt mich an.