Skip to content
Water ripples effect in javascript.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Update index.html Jun 19, 2013
js #1 Added CORS images support. Fix multiple plugin instance issue Jan 5, 2015
.gitattributes Add git specific files Jun 28, 2013
.gitignore Add git specific files Jun 28, 2013 Update Dec 29, 2014


Water ripples effect in javascript.

This javascript jQuery plugin to simulate 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. See the demo:

Usage Example:

Include source files:

<script src="//"></script>
<script src="js/ripple.js"></script>

Add an image or a div tag with the image background to the body:

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


<div id="ripple" style="background-image:url(image.jpg);width:600px;height:300px;">

Run the plugin:

<script type="text/javascript">
$(document).ready(function() {

Also you can pass various parameters to the plugin:

$("#ripple").waterripple({ arbitrary: 5000 });

Available parameters/options:


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


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


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

You can’t perform that action at this time.