Examples

Click on the example to see the code.

Default functionality


                                                    jQuery('#example1').raindrops();


jQuery('#example2').raindrops(
{color:'#99d4a5',
canvasHeight:200});


jQuery('#example3').raindrops(
{color:'#ddb3c2',
waveLength: 700,
waveHeight: 50});

jQuery('#example4').raindrops(
{color:'#a5d2da',
density: 0.1,
frequency: 20});


jQuery('#example5').raindrops(
{color:'#f77b7b',
canvasHeight:150, 
waveLength: 100,
 rippleSpeed: 0.05, 
density: 0.04});


                                                jQuery('#example6').raindrops(
{color:'#ffef92',
canvasHeight:250,
rippleSpeed: 0.01,
frequency: 1,
density: 0});

Documentation

These are the parameters that you can use with the plugin. You can see how to use them in the examples section.

color

Water Color.

waveLength

Wave Length. A numeric value. The higher the number, the smaller the wave length. Default: 340.

frequency

Raindrops frequency. Higher number means more frequent raindrops. Default: 3.

waveHeight

Wave height. Higher number means higher waves created by raindrops. Default: 100.

density

Water density. Higher number means shorter ripples. Default: 0.02.

rippleSpeed

Speed of the ripple effect. Higher number means faster ripples. Default: 0.1.

canvasWidth

Width of the water. Default is 100% of the parent's width.

canvasHeight

Height of the water. Default is 50% of the parent's height.

rightPadding

To cover unwanted gaps created by the animation. Default: 20.

position

Canvas position. Default: 'absolute'.

positionBottom

Canvas position. Default: Bottom = 0.

positionLeft

Canvas position. Default: Left = 0.

Just a drop in the ocean

Raindrops.js - Raindrops effect plugin for jQuery

The Math

The Code

The Plugin

DOWNLOAD