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.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below.

Project Folder Structure:

Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Rain Animation’. Inside this folder, we have two files. These files are – index.html and script.js. The first file is the HTML document while the second one is the javascript. Follow these basic steps to make it easy to understand.

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.

<!DOCTYPE html>
<html>
<head>
    <title>Rain Animation</title>
    <style>
       
    </style>
</head>
<body>
    <div class="rain"></div>
    <script src="script.js"></script>
</body>
</html>

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 the shorthand, we set the timing function to linear so the speed stays continuous from start to end.

.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’s it for this tutorial. I hope you guys enjoyed this tutorial. You can stay updated with the latest tutorials by subscribing to us on YouTube. You can also find us on Facebook. Happy Coding!

Tags

1 Comments

Post a Comment

Previous Post Next Post