Ich war von dem „water ripple effect“ schon immer fasziniert und so wurde es mal Zeit sich mit damit zu beschäftigen. Rausgekommen ist dabei ein kleines jQuery Plugin, welches ihr komfortabel in euren Projekten mit einbinden könnt. Wie bei meinen letzten jQuery Plugins auch, könnt ihr den „water ripple effect“ mit, oder ohne jQuery benutzen. Als Zip und minifiert ist dieses Plugin nur knapp 2KB groß.
Ursprünglich für Java von Neil Wallis geschrieben und später von Sergey Chikuyonok für JavaScript adaptiert, musste ich das Rad nicht neu erfinden. Ich habe lediglich versucht den Code noch an ein paar Stellen weiter zu optimieren.
Zum Einsatz kommen die Canvas und gutes altes JavaScript. Dadurch ist sichergestellt, dass eine maximale Abwärtskompatibilität erreicht wird. So sollten auch ältere Browser in der Lage sein den Effekt darzustellen. Trotz Optimierungen kostet der Effekt allerdings noch immer gut Rechenpower. Ihr solltet also darauf achten nicht zu große Bilder zu verwenden.
Hier könnt ihr euch eine Demo anschauen:
Folgend ein paar Beispiele wie ihr den Effekt in euer Projekt einbinden könnt. Zunächst mit jQuery, bzw. als jQuery Plugin.
Zuerst einmal müsst ihr jQuery und danach dann das Plugin in eure Seite einbinden.
var settings = {
image: './img/SwimmingPool.jpg',//image path
rippleRadius: 3,//radius of the ripple
width: 480,//width
height: 480,//height
delay: 1,//if auto param === true. 1 === 1 second delay for animation
auto: true//if auto param === true, animation starts on it´s own
};
Als nächstes erstellt ihr ein Objekt. Mit diesem könnt ihr diverse Parameter übergeben. Unverzichtlich ist der Parameter image, mit dem ihr angeben müsst wo das Bild liegt das ihr für den Effekt verwenden wollt. Mit rippleRadius bestimmt ihr den Radius der Wellen. Die Parameter width und height geben an wie groß euer Bild ist. Der Parameter delay kommt ins Spiel wenn ihr den Parameter auto auf true stellt. Steht auto auf true läuft die Animation automatisch ab und mit dem delay könnt ihr bestimmen wie schnell
$( '#holder' ).waterRippleEffect( settings );
Hiermit startet, bzw. initiiert ihr den Effekt. holder ist ein einfaches Div. Wie ihr seht wird an dieser Stelle das eben erstellte Objekt settings mit übergeben.
Soweit so gut. False ihr bei den settings auto auf true gestellt habt dann seid ihr im Prinzip schon fertig.
Wollt ihr das Ganze mit der Maus beeinflussen, dann könnt ihr z.B. folgendes schreiben:
$( '#holder' ).click( function( e ) {
var mouseX = e.pageX - $( this ).offset().left;
var mouseY = e.pageY - $( this ).offset().top;
$( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );
} );
So erscheinen die Wellen per Klick an der aktuellen Mausposition.
$( '#holder' ).mousemove( function( e ) {
var mouseX = e.pageX - $( this ).offset().left;
var mouseY = e.pageY - $( this ).offset().top;
$( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );
} );
Und so per Mousefollow.
Ihr benutzt kein jQuery? Kein Problem. Dann macht es einfach wie folgt ohne jQuery:
Ihr bindet nur die jquery.waterrippleeffect.min.js in eure Seite mit ein.
Der part mit dem settings Objekt ist 1zu1 gleich wie oben für die jQuery Variante beschrieben, weshalb ich das an dieser Stelle nicht noch einmal wiederhole. Ihr könnt diesen Part einfach so von oben übernehmen.
So startet ihr den Effekt:
var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings );
holder ist hier wieder ein Div und auch hier wird das settings Objekt mit den Parametern für den Effekt übergeben.
Wollt ihr das Ganze per Mausklick steuern ergänzt folgendes:
document.getElementById( 'holder' ).addEventListener( 'click', function( e ) {
var mouseX = e.layerX;
var mouseY = e.layerY;
waterRippleEffect.disturb( mouseX, mouseY );
} );
Für einen Mouse-Follow schreibt ihr einfach:
document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) {
var mouseX = e.layerX;
var mouseY = e.layerY;
waterRippleEffect.disturb( mouseX, mouseY );
} );
Das wars. Mehr ist nicht nötig. Ihr könnt euch auch die Demo oben direkt anschauen und den Code aus dem HTML File entnehmen. Dazu einfach hier klicken.
Zum Download stelle ich euch drei Varianten zur freien Verfügung. Die jquery.waterrippleeffect.min.js wie hier in den Beispielen verwendet. Die jquery.waterrippleeffect.js, falls ihr mal hinter die Kulissen schauen wollt und die jquery.waterrippleeffect.min.js.zip als Zip.
Viel Spaß mit diesem jquery Plugin. Falls ihr Fragen oder Anregungen habt würde ich mich über ein paar Kommentare freuen.
