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

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)"> </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:
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.