Beautiful and realistic JavaScript raindrops effect – Rainyday.js
|Rainyday.js is a library for creating JavaScript raindrops effect, using also HTML5 Canvas.
A nice JavaScript raindrops effect
Rainyday.js is an awesome JS library for creating a realistic raindrops effect on webpages, using HTML5 Canvas element and JavaScript.
Watch rain on your window right in your browser!

The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface.
Rainyday.js is a pure JavaScript library which uses HTML5 features so it’s supported by most of the modern browsers.
Sample code (JS):
var engine = new RainyDay({ image: element, // Image element // This value is required parentElement: someDiv, // Parent element for the canvas crop: [0, 0, 50, 60], // Coordinates (only a part of the image) // Entire image by default blur: 10, // Defines blur due to rain effect // Assuming 10 if not provided // Use 0 value to disable the blur opacity: 1 // Opacity of rain drops // Assuming 1 if not provided }); engine.rain( [ [1, 0, 20], // add 20 drops of size 1... [3, 3, 1] // ... and 1 drop of size from 3 - 6 ... ], 100); // ... every 100ms
Samples:
https://maroslaw.github.io/rainyday.js/demo012_2.html
https://maroslaw.github.io/rainyday.js/demo012_3.html
Project website:
https://maroslaw.github.io/rainyday.js
GitHub:
https://github.com/maroslaw/rainyday.js
Enjoy!