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.

Upgrade to the new version for superior visual realism and performance, now featuring advanced WebGL shader techniques like Screen Space Reflections and Physically-Based Rendering.

How to use it:

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

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/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)">
</div>

3. Call the plugin with options.

$('.demo').ripples({

  // 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
$('.demo').ripples('show');

// hide the effect
$('.demo').ripples('hide');

// destroy the plugin
$('.demo').ripples('destroy');

// play the simulation's state
$('.demo').ripples('play');

// pause the simulation's state
$('.demo').ripples('pause');

// 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);

Changelog:

2025-01-31

• Upgraded to lolrazh's enhanced-jquery-ripples, which enhances realism and performance.

2019-09-16

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

2018-02-21

• v0.6.2:  Fix effect not working on iOS

2017-09-06

• v0.6.1:  Get rid of WebGL warning

2017-07-15

• v0.6.0

2016-09-12

• JS update.

2016-06-20

• JS update.

2015-09-04

• JS update.

2015-07-26

• Make OES_texture_float_linear optional

2015-04-11

• Add "interactive" property

2015-03-17

• Use isPercentage function instead of endsWith

2015-02-25

• update.

2014-11-04

• Added method to create drops programmatically

2014-10-31

• Now it also works in IE.

2014-07-19

• 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.