Creating Raindrops On Water Effects with jQuery and Canvas - raindrops

raindrops is a jQuery plugin that helps you create a 'raindrops impacting on water surfaces' effect using jQuery UI and Html5 canvas element.

See also:

• Realistic Raindrops Effect with Canvas and Rainyday.js
• jQuery Plugin For Water Ripple Animation - ripples

How to use it:

1. Include the necessary jQuery and jQuery UI libraries in your document.

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Download and include the jQuery raindrops.js script after jQuery library.

<script src="raindrops.js"></script>

3. Call the plugin to implement a default 'raindrops on water' effect on specified container.

$('SELECTOR').raindrops(); 

4. Configuration options.

$('#example1').raindrops({

// Wave Length..
waveLength: 340,    

// Width of the  water. 
canvasWidth: 0,     

// Height of the water. 
canvasHeight: 0,    

// Water Color
color: '#00aeef', 

// Raindrops frequency. 
frequency: 3,       

// Wave height. Higher number means higher waves created by raindrops.
waveHeight: 100 ,   

// Water density. 
density: 0.02,   

// Speed of the ripple effect. Higher number means faster ripples.   
rippleSpeed:  0.1,  

// To cover unwanted gaps created by the animation.
rightPadding: 20,   

// Poistion options. 
position:'absolute',
positionBottom:0,
positionLeft:0

}); 

---

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