QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Create Raining Effect using JavaScript

Create Raining Effect using JavaScript

Awesome_Rainy_Effect

In this post I will show you how to create a raining effect using JavaScript. We will be using a JavaScript library called as Rainyday. We will also see how it works.


View Demo


Implementation

Rainyday creates the rainy effect inside a canvas and then positions the canvas over a given image.

This is the sample example code:

<!DOCTYPE html>
<html>
    <head>
        <title>Awesome Rainy Effect</title>
        <style media="screen">
            body {
                overflow: hidden;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            img {
                width: 100%;
                height: 100%;
            }
        </style>
        <script src="rainday.js"></script>
        <script>
            function loaded_image(img)
            {
                var engine = new RainyDay({image: img});
                    engine.rain([ [1, 2, 8000] ]);
                    engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
            }
        </script>
    </head>
    <body>
        <img id="background" src="rain-forest.jpg" onload="loaded_image(this)" />
    </body>
</html>

Jun 2, 2014Narayan Prusty
SEO For Multi-language and Multi-Currency WebsitesResponsive Typography Techniques
Comments: 1
  1. Ron
    5 years ago

    Hi There,

    How can I implement this awsome rainy effect in WordPress?

    Thanks in advance,
    Ron

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 2 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Automatically Resizing Textarea
  • Creating A Simple Backdrop Effect
  • Sidebar for Phonegap App
  • JavaScript Function Techniques You May Not Know
  • Facebook Style Chat Bubbles using CSS
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license