JavaScript

Rain Drop Effects With Rainyday.js

Rain Drop Effects With Rainyday.js

Advertisement

This post is for web designers who want to add a raindrop-like effect on the web page. There is a cool javascript library that uses HTML5 canvas to show raindrops falling on a glass surface. This looks really interesting. It also has an option to include the rain sound by adding the path to sound in param value.

This library is easy to use. In this article, I will explain how to use this JS library to show raindrop effect on the web page.

Demo Download

Rain Drop Effects With Rainyday.js

Advertisement

How to use it:

Add the HTML section on the web page. It basically adds a blank image on the web page.

Include rainyday.js library file in the footer of the web page and create the function to add the raindrop effect.

There are lots of ways you can use this library. You can explore all the methods and parameters you can use to customize different things.

Here are the main methods

  • Pause animation: rainyDay.pause()
  • Resume animation: rainyDay.resume()
  • Destroys the rain engine: rainyDay.destroy()

You can check code files of different demo pages here. Download it and try on your system. That will help you to better understand how you can use it.

Advertisement

Comments
To Top