jQuery Plugin For Water Ripple Animation - ripples

File Size: 216 KB
Views Total: 58446
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Water Ripple Animation - ripples

ripples is a fancy jQuery plugin that creates a water ripple animation following the mouse cursor on an Html element based on WebGL. Currently works with modern browsers that support at least one of the following: WebGL, OES_texture_float extension, OES_texture_float_linear extension.

How to use it:

1. Include the jQuery javascript library and jQuery ripples plugin at the end of the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="js/jquery.ripples.js"></script>

2. Create an Html element with a background image that you want to apply the effect to.

<div class="demo" style="background-image:url(1.jpg)">

3. Call the plugin with options.


  // Image Url
  imageUrl: null,

  // The width and height of the WebGL texture to render to. 
  // The larger this value, the smoother the rendering and the slower the ripples will propagate.
  resolution: 256,

  // The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas.
  dropRadius: 20,

  // Basically the amount of refraction caused by a ripple. 
  // 0 means there is no refraction.
  perturbance: 0.04,

  // Whether mouse clicks and mouse movement triggers the effect.
  interactive: true,

  // The crossOrigin attribute to use for the affected image. 
  crossOrigin: ''

4. API methods.

// show the effect

// hide the effect

// destroy the plugin

// play the simulation's state

// pause the simulation's state

// add a drop at the element's relative coordinates (x, y). 
// radius controls the drop's size and strength the amplitude of the resulting ripple.
$('.demo').ripples('drop', x, y, radius, strength);



  • v0.6.3: Actually get rid of all references when destroying an instance


  • v0.6.2:  Fix effect not working on iOS


  • v0.6.1:  Get rid of WebGL warning


  • v0.6.0



  • JS update.


  • JS update.


  • Make OES_texture_float_linear optional


  • Add "interactive" property


  • Use isPercentage function instead of endsWith


  • update.


  • Added method to create drops programmatically


  • Now it also works in IE.


  • Bug fixes & features

This awesome jQuery plugin is developed by sirxemic. For more Advanced Usages, please check the demo page or visit the official website.