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!

JavaScript raindrops effect using HTML5 Canvas and JS
JavaScript raindrops effect using HTML5 Canvas and JS

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!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1