Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a rain🌧 animation. To create this animation we will use HTML,CSS, and Javascript. We do not make use of any images, icons or external libraries and plugins to create this animation.

As I have mentioned in my tutorials before, this kind of complicated animation hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.

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.

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.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document. The stylesheet has also been added. No need to create a separate stylesheet file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JavaScript Rain🌧 Animation | Codehemu</title>
    <link href="https://www.codehemu.com/favicon.ico" rel="icon" type="image/x-icon">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            background: #0D343A;
            overflow: hidden;
            position: relative;
        }

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

        .drop {
            /* Older WebKit */
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(13, 52, 58, 1)), to(rgba(255, 255, 255, 0.6)));
            /* Older Firefox */
            background: -moz-linear-gradient(top, rgba(13, 52, 58, 1) 0%, rgba(255, 255, 255, .6) 100%);
            /* Standard syntax */
            background: linear-gradient(to bottom, rgba(13, 52, 58, 1) 0%, rgba(255, 255, 255, .6) 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;
        }

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

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

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

    </style>
</head>
<body>
    <div class="rain"></div>
    <script src="script.js"></script>
</body>
</html>

HTML Overall Structure

The code sets up a page that contains a <div class="rain"></div> element. With the help of JavaScript, raindrop elements will be inserted into this div element. The <style> tag is embedded directly inside the html head for styling. A script.js file is linked at the end of the <body> to handle the animating the raindrops.

This animation works on all browsers, so it uses moz and webkit (CSS).

JavaScript:

Next, we style the elements created by HTML to give them shape and add animation using javascript. Now copy the code provided to you below and paste it into your script.js file.

// number of drops created.
var nbDrop = 858;

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

// Make it rain drops
document.addEventListener('DOMContentLoaded', () => {
    const rainContainer = document.querySelector('.rain'); // Get the container once

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

        // Create a new div element
        const drop = document.createElement('div');
        drop.classList.add('drop'); // Add the 'drop' class
        drop.id = 'drop' + i; // Set the ID

        // Set the CSS properties
        drop.style.height = dropHeight + 'px';
        drop.style.left = dropLeft + 'px';
        drop.style.top = dropTop + 'px';

        // Append the created element to the rain container
        rainContainer.appendChild(drop);
    }
});

JavaScript logic

The logic behind how the above script works is explained. Hopefully, here is a discussion about main logics that you need to know.

  • document.addEventListener('DOMContentLoaded', () => { ... }); : The script will run after the entire HTML document is loaded.
  • for (let i = 0; i < nbDrop; i++) { ... }; : This loop will run 858 times, creating a new raindrop each time.
  • randRange(minNum, maxNum) : This 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 rain drop.

That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!

Tags

Post a Comment

إرسال تعليق

أحدث أقدم