| Snow Effect 1 | Snow Effect 2 | Snow Effect 3 | Rain Effect | water Effect 1 | water Effect 2 | Documentation |
$('body').rainSnow({
select_effect: 'snow',
drops_count: 100,
drop_falling_speed: 7000,
wind_direction: 3,
drop_angle : '-10deg',
drops_size:[[2,2], [3,3], [4,4], [5,5], [6,6]],
lightning_effect : [false, 50],
drop_left_to_right : false
});
| select_effect |
There are 3 effects (snow, rain, water) from which you can choose any one for your web page.
Default effect is snow (select_effect: snow) |
| drops_count |
You can use this param to increase or decrease the count of drops but it works the other way like less value will make more drops appear and greater value will display less drops.
default value is 100 (drops_count: 100) |
| drop_falling_speed |
You can use this param to increase or decrease the speed of falling of snow drop
default speed is 100 (drop_falling_speed: 7000) by use of this parameter we can set each drop falling speed on screen |
| wind_direction |
Every raindrop or snow droplet falls according to the direction and speed of the wind so I made this parameter.
default value is 3 (wind_direction: 3) An increase in value would look like a heavy wind. |
| drop_angle |
Using this param we can change the angle of the drop according to the direction of the wind
default value is '-10def' (drop_angle : '-10deg') Suppose the wind_direction is 3 then the drop_angle should be '-10deg' and if the wind_direction is -3 then the drop_angle should be '10deg'. |
| drops_size |
Using this param we can set drop width and height.
default value is ([[2, 2], [3, 3], [4, 4], [5, 5], [6, 6]]) [[2, 2], [3, 3], [4, 4], [5, 5], [6, 6]] it means there are 5 different size drops, first drop width is 2px and height is 2px, second drop width is 3px and height is 3px, and so on for other drops. |
| drop_left_to_right |
Using this parameter we can change the drop falling position angle from left to right instead of top to bottom.
default value is false (drop_left_to_right: false) |
| lightning_effect |
Use this parameter to display lightning in the sky.
If you set it to true, you will also have to set the speed of lightning by another option. default value is false (drop_left_to_right: [false, 50]) |
| We can also change drop color and main background image from style.css |