Realistic, Interacitve Water Effects with Enhanced jQuery Ripples

Enhanced jQuery Ripples is a WebGL-powered plugin that creates realistic, interactive water ripple effects on any DOM element.

This modernized version extends Sirxemic's original jQuery Ripples Plugin with advanced shader techniques, screen space reflections, and physically-based rendering methods to produce more convincing water simulations.

Features

• Advanced Rendering: Screen space reflections sample underlying content iteratively to create physically accurate reflections that adapt to surface curvature and background brightness.
• Physically-Based Lighting: GGX microfacet BRDF produces sharp, realistic specular highlights with proper energy conservation and Fresnel calculations.
• Dynamic Light Control: Adjustable light direction parameters let you position virtual light sources for more dramatic or subtle shading effects.
• Improved Interaction: Mouse and touch tracking creates ripples with variable strength and radius based on input pressure and movement speed.
• Iridescent Effects: Procedural noise functions and thin-film interference calculations add subtle chromatic shifts that simulate oil-on-water appearance.
• Enhanced Normal Mapping: Multi-sample normal calculations smooth out wave transitions and reduce visual artifacts at high perturbance values.
• Edge Preservation: Depth-based detection prevents excessive distortion at ripple boundaries where waves meet static content.
• Performance Optimization: Efficient framebuffer switching and reduced overdraw keep frame rates stable even with multiple simultaneous ripple sources.
• Auto Rain Mode: Generates random water drops at configurable intervals for ambient animation without user interaction.

How to use it:

1. Download the plugin and place the main script jquery.ripples.js after the latest jQuery library.

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

2. Initialize the plugin on any element that has a background image or solid color. The plugin creates a WebGL canvas overlay on the target element and renders ripple distortions in real time. User interactions automatically trigger ripple effects when interactive mode is enabled.

$(document).ready(function() {
  // Apply the ripple effect to the body's background
  $('body').ripples({
    interactive: true
    // more options here
  });
});

3. For more control over ripple behavior, you can programmatically trigger drops based on custom mouse events. This example varies ripple size over time and adjusts strength based on input type:

const baseRadius = 37;
let time = 0;

try {
  const $ripples = $('body').ripples({
    resolution: 512,
    dropRadius: baseRadius,
    perturbance: 0.12,
    interactive: true
  });

  function handleRipple(e) {
    const $el = $(this);
    const x = e.pageX - $el.offset().left;
    const y = e.pageY - $el.offset().top;

    time += 0.05;
    const currentRadius = baseRadius * 0.5 + Math.sin(time * 4) * 10;
    const strength = e.type === 'mousedown' ? 0.7 : 0.3;

    $el.ripples('drop', x, y, currentRadius, strength);
  }

  $('body')
    .on('mousemove', handleRipple)
    .on('mousedown', handleRipple);

} catch (error) {
  console.error('Error:', error);
  if (error.message?.includes('WebGL')) {
    console.error('WebGL not supported or encountered an error');
  }
}

4. All configuration options.

• resolution: (Number, default: 512) This defines the resolution of the WebGL texture used for the simulation. Higher values create smoother, more detailed ripples but demand more GPU processing power.
• dropRadius: (Number, default: 35) Sets the radius in pixels for the ripples that are generated from user interactions like clicks or mouse movement.
• perturbance: (Number, default: 0.7) This controls the distortion strength or refraction amount of the ripples. Lower values produce very subtle effects, while higher values create more dramatic distortions.
• interactive: (Boolean, default: true) A simple toggle to enable or disable the ripple effect from being triggered by user mouse or touch interactions.
• imageUrl: (String, default: null) Allows you to specify a background image URL directly in the JavaScript initialization. If left as null, the plugin will use the background-image from your CSS.
• crossOrigin: (String, default: "") Sets the crossOrigin attribute for the image being loaded. This is necessary if you are using an image hosted on a different domain to avoid security errors.

$('body').ripples({
  imageUrl: null,
  resolution: 512,
  dropRadius: 37,
  perturbance: 0.12,
  interactive: true,
  crossOrigin: ''
});

5. API methods.

// show the effect
$('body').ripples('show');

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

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

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

// pause the simulation's state
$('body').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.
$('body').ripples('drop', x, y, radius, strength);

---

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