jQuery Plugin For Water Ripple Animation ripples - Free Download jQuery Plugin For Water Ripple Animation - ripples

Free Download jQuery Plugin For Water Ripple Animation – ripples

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Water Ripple Animation – ripples, hope it will help you in programming stack.

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

Demo Download

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.

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

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

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

3. Call the plugin with options.

view source
01 $('.demo').ripples({
02  
03   // Image Url
04   imageUrl: null,
05  
06   // The width and height of the WebGL texture to render to.
07   // The larger this value, the smoother the rendering and the slower the ripples will propagate.
08   resolution: 256,
09  
10   // The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas.
11   dropRadius: 20,
12  
13   // Basically the amount of refraction caused by a ripple.
14   // 0 means there is no refraction.
15   perturbance: 0.04,
16  
17   // Whether mouse clicks and mouse movement triggers the effect.
18   interactive: true,
19  
20   // The crossOrigin attribute to use for the affected image.
21   crossOrigin: ''
22    
23 });

4. API methods.

view source
01 // show the effect
02 $('.demo').ripples('show');
03  
04 // hide the effect
05 $('.demo').ripples('hide');
06  
07 // destroy the plugin
08 $('.demo').ripples('destroy');
09  
10 // play the simulation's state
11 $('.demo').ripples('play');
12  
13 // pause the simulation's state
14 $('.demo').ripples('pause');
15  
16 // add a drop at the element's relative coordinates (x, y).
17 // radius controls the drop's size and strength the amplitude of the resulting ripple.
18 $('.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

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.

source : jquery.net

Related posts: