Realistic, Interacitve Water Effects with Enhanced jQuery Ripples

Enhanced jQuery Ripples is lolrazh's WebGL water-effect fork of Sirxemic's original jQuery Ripples Plugin, with screen-space reflection sampling, GGX specular shading, iridescent color shifts, and mouse-driven surface tilt.

It keeps the $.fn.ripples() integration model and exposes 6 initialization options plus runtime controls for drops, visibility, playback, sizing, image changes, and automatic rain.

Features

• WebGL ripple simulation over CSS background images or an imageUrl.
• Screen-space reflection sampling with brightness and edge weighting.
• GGX microfacet specular highlights and Fresnel reflection calculations.
• Mouse and touch ripple input with mouse-position surface tilt.
• Multi-sample surface normals for smoother wave shading.
• Time-based iridescent color shifts and procedural film grain.
• Automatic rain drops after one second of mouse inactivity.
• Runtime controls for visibility, playback, sizing, ripple injection, rain, and option changes.

How To Use It

Load jQuery before the fork's jquery.ripples.js file. The script requires WebGL, OES_texture_float, and a floating-point framebuffer configuration.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.ripples.js"></script>

Create an element with a background image, then initialize the ripple effect on that element.

<div
  class="water-effect"
  style="width:100%;height:400px;background:url('/path/to/water.jpg') center/cover;">
</div>

$(function() {
  $('.water-effect').ripples({
    resolution: 512,
    dropRadius: 37,
    perturbance: 0.12,
    interactive: true
  });
});

Trigger A Ripple With JavaScript

The drop method accepts coordinates relative to the element, a radius in pixels, and ripple strength.

$('.water-effect').ripples('drop', 200, 150, 40, 0.15);

Available Plugin Options

Option	Description
imageUrl	String or null. Default: null. Loads a background image from JavaScript. A null value falls back to the element's CSS background-image when one is available.
resolution	Number. Default: 512. Sets the width and height of the ripple simulation texture. This value is read during initialization and is not handled by the runtime set method.
dropRadius	Number. Default: 37. Sets the radius used by built-in pointer-generated drops.
perturbance	Number. Default: 0.12. Controls how strongly the ripple surface distorts the sampled background texture.
interactive	Boolean. Default: true. Controls built-in mouse and touch ripple input. Initializing with true also activates mouse-position tracking for the surface tilt behavior.
crossOrigin	String. Default: ''. Assigns the value to Image.crossOrigin for non-data-URI image sources.

HTML Data Attributes

Initialization merges jQuery data values from the element with the option object. The six options can also be supplied through dashed HTML data attributes.

<div
  class="water-effect"
  data-image-url="/path/to/water.jpg"
  data-resolution="512"
  data-drop-radius="37"
  data-perturbance="0.12"
  data-interactive="true"
  data-cross-origin="anonymous">
</div>

API Methods

Method	Description
drop(x, y, radius, strength)	Injects a ripple at coordinates relative to the element. radius controls drop size and strength controls amplitude.
updateSize()	Updates the internal canvas dimensions to match the element. The plugin also binds this method to window resize.
destroy()	Stops rain, removes plugin handlers and generated elements, restores the CSS background, and removes the stored instance.
show()	Shows the ripple canvas and hides the source CSS background image.
hide()	Hides the ripple canvas and restores the source CSS background image.
pause()	Stops ripple simulation updates.
play()	Resumes ripple simulation updates.
set(property, value)	Changes dropRadius, perturbance, interactive, crossOrigin, or imageUrl. Changing imageUrl reloads the background texture.
startRain()	Starts random drops every 300 milliseconds. The simulation also calls this method after one second with no recorded mouse movement while playback is active.
stopRain()	Stops the active automatic-rain timer.
$.fn.ripples.noConflict()	Restores the previous $.fn.ripples value and returns the plugin function.

Method Examples

var $water = $('.water-effect');

// Hide or show the rendered effect.
$water.ripples('hide');
$water.ripples('show');

// Pause or resume simulation updates.
$water.ripples('pause');
$water.ripples('play');

// Change runtime properties.
$water.ripples('set', 'dropRadius', 28);
$water.ripples('set', 'perturbance', 0.08);
$water.ripples('set', 'imageUrl', '/path/to/another-image.jpg');

// Control automatic rain.
$water.ripples('startRain');
$water.ripples('stopRain');

// Recalculate canvas dimensions or remove the instance.
$water.ripples('updateSize');
$water.ripples('destroy');

FAQs

Can I change resolution after initialization?

No. The runtime set method accepts dropRadius, perturbance, interactive, crossOrigin, and imageUrl. Recreate the instance when a different simulation resolution is required.

How does automatic rain work?

While playback is active, the source starts rain after one second with no recorded mouse movement. The rain timer creates a random drop every 300 milliseconds until stopRain() runs or mouse movement stops the rain handler.

Why does a cross-origin background image fail to load?

The crossOrigin option only sets the image element's CORS mode. The image server must also return the appropriate CORS response headers.

Does the plugin expose callbacks or custom events?

The fork does not define a public callback or custom-event API. Bind normal jQuery or DOM events to the affected element and call the plugin methods from those handlers.

---

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