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.
