Rainyday.js is a cool JavaScript library that uses HTML5 Canvas to render animated rain drops falling on a window glass. It looks really awesome and fells like you are watching real rain drops falling on a glass.
It is easy to use Library and supported by most of the modern browsers which support HTML5.
How to use it:
Add the html section with an image background and canvas.
1 2 3 4 5 6 | <body onload="demo();"> <img id="background" src="img/night.jpg" alt="background" /> <div id="cholder"> <canvas id="canvas"></canvas> </div> </body> |
Include rainyday.js library file in the footer of the web page and create the function to add the raindrop effect.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script src="dist/rainyday.0.1.1.min.js"></script> <script> function demo() { var engine = new RainyDay('canvas', 'background', window.innerWidth, window.innerHeight); engine.gravity = engine.GRAVITY_NON_LINEAR; engine.trail = engine.TRAIL_DROPS; engine.rain([ engine.preset(0, 2, 500) ]); engine.rain([ engine.preset(3, 3, 0.88), engine.preset(5, 5, 0.9), engine.preset(6, 2, 1), ], 100); } </script> |
advertisement
hi. it´s easy to put in wordpress template?
thanks
Yes. You can easily integrate in WordPress
Is it possible play with the values you have set so that I can vary:
1. amount of droplets
2. droplets speed
3. droplets size
Yes, you can customize values for adding more drops, changing thickness and speed.
this not working…..!
Check the github page. It mentioned how to properly implement. I also added the same.
please send proper step to integrate this in my wp theme.
I will write a post about it in few days.
deepanker this not working plz help me…..
Thanks for the info. I’d be interested in the basic steps for wordpress integration as well. I did not see a follow up post. Was one written? I will play around with it a little more myself if not.
Hi Deepanker,
I was trying to find your post. Please let me know, if you’ve written it (Re step for wp integration)
Thanks,
Nav
I have not yet writen. But if you want, I will be writing a post in coming days for sure.
sorry……
is a working
…….