Blog

You are currently viewing Create Rain Animation Effect Using HTML and CSS

Create Rain Animation Effect Using HTML and CSS

Telegram Group Join Now

Create Rain Animation Using HTML and CSS

Welcome to today’s lesson. We’ll make a Rain Animation Effect in this post. We’ll use JS, HTML, and CSS code to create an animation of rain. The website has been enhanced with a number of effects, including this Rain Animation, to make it look more user-friendly and attractive.

Create Rain Animation Using HTML,CSS and JavaScript
Create Rain Animation Using HTML,CSS and JavaScript

A rain effect that is animated is produced using JS, HTML, and CSS. The smooth raining effect can be added with the aid of javascript, but to add this type of effect, we must be familiar with CSS ideas like animation and keyframes.

50+ HTML, CSS & JavaScript Projects With Source Code

Code by N/A
Project Download Link Available Below
Language used HTML,CSS, and JavaScript
External link / Dependencies No
Responsive Yes
Rain Animation Table

ADVERTISEMENT

You need basic ES6 knowledge for this javascript project. This tutorial is well suited for javascript intermediates. Let us get started with the project

Live Preview Of Rain Animation Using CSS

Before moving forward to the code first of all we will see the live preview of the code so you can see how it is working on clicking the button.

Portfolio Website using HTML and CSS (Source Code)

HTML Code For Rain Animation:-

We start with the HTML section. First copy the code provided below into your HTML File.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
</html>

We don’t need any particular components to add structure to our HTML, but the body tag is necessary to style our website. We’ll include two links in our HTML file: one for the javascript file link and the other for the CSS file link.

<!-----CSS File------>
<link rel="stylesheet" href="style.css">
<!-----Javascript File---->
<script src="script.js"></script>

CSS Code For Rain Animation:-

Linear Gradient For Rain Animation:-

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
 

background-image: linear-gradient(direction, color-stop1, color-stop2, …);  

@Keyframes (animation):-

  • The @keyframes rule specifies the animation code.
  • The animation is created by gradually changing from one set of CSS styles to another.
  • During the animation, you can change the set of CSS styles many times.
  • Specify when the style change will happen in percent, or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

@keyframes animationname {keyframes-selector {css-styles;}}

we have used keyframes for animating the rains and linear gradient to make the background gradient in color.

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(15deg, #e66465, #9198e5);
  transform: rotate(15deg);
  height: 100vh;
  overflow: hidden;
}
i {
  position: absolute;
  height: 160px;
  background: linear-gradient(transparent, #fff);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  animation: raining 5s linear Infinite;
}
@-moz-keyframes raining {
  0% {
    transform: translateY(-160px);
  }
  100% {
    transform: translateY(calc(100vh + 160px));
  }
}
@-webkit-keyframes raining {
  0% {
    transform: translateY(-160px);
  }
  100% {
    transform: translateY(calc(100vh + 160px));
  }
}
@-o-keyframes raining {
  0% {
    transform: translateY(-160px);
  }
  100% {
    transform: translateY(calc(100vh + 160px));
  }
}
@keyframes raining {
  0% {
    transform: translateY(-160px);
  }
  100% {
    transform: translateY(calc(100vh + 160px));
  }
}

Step1:The padding and margin will be set to “zero” using the body tag selector. The background property will be used to set a linear gradient using the colours “red” and “blue,” and the overflow property will be used to set the overflow to “hidden,” preventing extra data from displaying outside the container.

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(15deg, #e66465, #9198e5);
    transform: rotate(15deg);
    height: 100vh;
    overflow: hidden;
}

Create Rain Animation Effect Using HTML and CSS

Step2: The position will now be set to “absolute” using the tag selector I the height will be set to “160 px” using the height property, the background colour will be set to a linear gradient using transparent and white, and the animation property will be used to add an animation of rain falling after a 5-second delay until it never stops.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Keyframes will be used to add the motion to our project after which it will be translated to “-160px” in the y-axis using the transform property.

i {
    position: absolute;
    height: 160px;
    background: linear-gradient(transparent, #fff);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    animation: raining 5s linear Infinite;
}

@-moz-keyframes raining {
    0% {
        transform: translateY(-160px);
    }
    100% {
        transform: translateY(calc(100vh + 160px));
    }
}

@-webkit-keyframes raining {
    0% {
        transform: translateY(-160px);
    }
    100% {
        transform: translateY(calc(100vh + 160px));
    }
}

@-o-keyframes raining {
    0% {
        transform: translateY(-160px);
    }
    100% {
        transform: translateY(calc(100vh + 160px));
    }
}

@keyframes raining {
    0% {
        transform: translateY(-160px);
    }
    100% {
        transform: translateY(calc(100vh + 160px));
    }
}

CSS Output:

Create Rain Animation Effect Using HTML and CSS

JavaScript Code For Rain Animation:-

The querySelector() method returns the first element that matches a CSS selector.

To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.  create an element() is used to create an element and an element. append child is used to insert a child.

We have made many children rain droplets and inserted them in the body tag.

10+ Javascript Projects For Beginners With Source Code

We also have given different speeds to the different rain droplets.

animation time and animation delay are also given to the droplets.

we are using a random function of the math library of javascript that will generate a random number between 0 to 1.

function meteor() {
let amount = 150;
let body = document.querySelector("body");
let count = 0;
while (count < amount) {
let drop = document.createElement("i");
let size = Math.random() * 5;
let posX = Math.floor(Math.random() * window.innerWidth);
let delay = Math.random() * -20;
let duration = Math.random() * 5;
drop.style.width = `${0.1 + size}px`;
drop.style.left = `${posX}px`;
drop.style.animationDelay = `${delay}s`;
drop.style.animationDuration = `${1 + duration}s`;
body.appendChild(drop);
count++;
}
}
meteor();

Video Output Of Rain Animation Effect:

Code Credit:- Evan

I hope hoped loved this blog and learned many things at the place please let us know your review in the comment section if you liked it please comment below as it will give us the motivation to create more blogs.

ADVERTISEMENT

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

ADVERTISEMENT

Written by @Himanshu Singh.

ADVERTISEMENT

Which Code Editor do you use for this Rain Animation Coding?

I personally recommend using VS Code Studio, It’s straightforward and easy to use.

ADVERTISEMENT

What is Rain Animation Effect?

Keyframes and CSS animation were used to make the animated background known as The Rain Animation Effect. These motion effects are used to make the website look more attractive.

ADVERTISEMENT

What is the use of rain animation effect?

The website’s appearance can be improved and made more attractive by using rain animation or one of many other effects of this kind.

Telegram Group Join Now

Tags: ,

Leave a Reply