JavaScript Rain Animation

This animation fills your web page with a full raindrops. The animation shows raindrops falling from above, creating a pleasant rainy atmosphere. This type of animation is usually done using HTML5 Canvas; Canvas will not be used in this tutorial. I will show you how to make a rain animation using Canvas in a later tutorial. Rain animations can be used for weather-themed projects or background effects. Adding wind and lightning effects will make it more interesting.

HTML Editor:

HTML

CSS

JS

Result

HTML Main container:

After creating the index.html file, open it in any code editor. If you are new, I would suggest you use Sublime Text. Visual studio code can also be a good option for coding. At the beginning of coding, create a div tag inside the HTML; the class name of the tag will be rain. All the raindrops will be added inside this tag through JavaScript. To connect the style and JavaScript files to the HTML, add two more tags. One is the style, and the other is the script.

<div class="rain"></div>

StyleSheet:

CSS will be written inside the style tag in HTML. Instead of doing this, a separate style.css file can be created. Here, CSS is written within the HTML, rather than creating a separate style file.

To show that it is raining at night, a dark color code (Hex-code: #0D343A) has been used in the background of the HTML body. Hide the scroll bar using body overflow.

 body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0D343A;
    overflow: hidden;
    position: relative;
}

Adding transform in main container:

We will use the Transform property to bend the rain animation. Here the main container rotated 350 degrees. Rotating the entire container will make it look like raindrops are falling with the wind. Here, note that the direction of raindrops will change as the degree of rotation changes.

.rain {
    transform: rotate(350deg) translate(-50%, -50%);
}

Adding Gradient and Animation:

Moving on to our drop elements, let's add gradient styling. Now we will set the background of the raindrops transparent (Hex-code: #00000000) at the top and transparent white (Hex-code: #ffffff99) at the bottom with a linear gradient. This simply means that the top of the drops will blend into the background and the transparent white color will stand out below. Linear gradients are specific to the Firefox browser, so we set another background and used -moz-linear-gradient.

And the best part of the code is animation. We set the animation loop infinitely and a duration of 0.63 seconds. Using shorthand we set the timing function to be linear so that the speed is constant from start to finish.

.drop {
    /* Older WebKit */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000000), to(#ffffff99)));
    /* Older Firefox */
    background: -moz-linear-gradient(top, #00000000 0%, #ffffff99 100%);
    /* Standard syntax */
    background: linear-gradient(to bottom, #00000000 0%, #ffffff99 100%);
    width: 1px;
    height: 89px;
    position: absolute;
    bottom: 200px;
    /* WebKit (Safari, Chrome) */
    -webkit-animation: fall .63s linear infinite;
    /* Mozilla (Firefox) */
    -moz-animation: fall .63s linear infinite;
    /* Standard syntax */
    animation: fall .63s linear infinite;
}

Setting Up the Keyframes:

Keyframes are where the magic happens. We need keyframes to show raindrops falling. For this, let us add margin-top (900px) at the top, which results in the raindrops falling animation. Different keyframe properties have been used to ensure that this animation is supported in all browsers.

/* animate the drops */
@-webkit-keyframes fall {
    to {
        margin-top: 900px;
    }
}

@-moz-keyframes fall {
    to {
        margin-top: 900px;
    }
}

@keyframes fall {
    to {
        margin-top: 900px;
    }
}

JavaScript logic:

Now let's get to the main task. Open the script.js file that was created first. We will write JavaScript code inside this file. The logic behind how the above script works is explained. Here is a discussion about the main logics that you need to know.

First, set the number of drops (value 858), named nbDrop, which defines how many raindrops will be created.

Random Function:

To make the raindrops appear to be falling naturally, each raindrop needs to be given a random shape and position. I will use the Math.random() function for this. And you will create a function to get random numbers within a range. The randRange() function returns a random number from a small and a large number, each time returning a new number. It is used to give the height and position of the raindrop.

// function to generate a random number range.
function randRange(minNum, maxNum) {
    return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

All the JavaScript code is shown below. Now copy the code provided to you below and paste it into your script.js file.

var nbDrop = 858;

document.addEventListener('DOMContentLoaded', () => {
    const rainContainer = document.querySelector('.rain');

    for (let i = 1; i < nbDrop; i++) {
        var dropHeight = randRange(20, 85);
        var dropLeft = randRange(0, 1600);
        var dropTop = randRange(-1000, 1400);

        const drop = document.createElement('div');
        drop.classList.add('drop');
        drop.id = 'drop' + i;

        drop.style.height = dropHeight + 'px';
        drop.style.left = dropLeft + 'px';
        drop.style.top = dropTop + 'px';

        rainContainer.appendChild(drop);
    }
});

Select Main Container: Here we are using document.querySelector('.rain') to select the main container element.

Creating loop:The for loop runs nbDrop times. In each loop, it creates a new div for a drop.

Append to the main container:Added the newly created drop element to the rain container using container.appendChild(drop).

Answering one of the common questions, ‘When should I use Math.random()?’
– You use a Math.random() if random values are needed.

‘Does creating so many elements (drop) put any load on the browser?’
– Creating so many div elements absolutely puts a load on the browser.

That wraps up this tutorial code! If you want faster updates, don't forget to subscribe to my yt channel and how did you like today's tutorial? Good or bad / happy or sad, pls comment me. I am waiting for your comments. Code on and have fun! And don’t forget to follow us for my latest tutorials!