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!