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

Prerequisites

To get the plugin to work, you must include jQuery and jQuery UI. Also, the element on which you want to run the effect must have specified width and height.

Parameters

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 UI

The Math

The Code

The Plugin

DOWNLOAD