Water ripples effect

is

Download   Demo

This javascript jQuery plugin Water ripple for simulateWat water ripples on the surface of an image. There are quite a few code snipplets on the internet to simulate water ripples in javascript-canvas. However the problem with them is that they’re published as bare-bone scripts with the settings hard coded inside the script. So the main task of this script is to give the developer an option to run this cool animation as the jQuery plugin.

1. INCLUDE JS FILES

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/ripple.js"></script>

2. HTML

<img id="ripple" src="image.jpg" />

3. JAVASCRIPT

$(document).ready(function() {     $("#ripple").waterripple(); });

4. OPTIONS

arbitrary

type: int, default: 1000 – time in miliseconds to generate a new random water ripple. By default it generates a new ripple every second. 0 – turns off random ripples

onclick

type: boolean, default: false – generate a new ripple on the mouse click

onmove

type: boolean, default: false – generate a series of ripples when moving the mouse over the animation