How To Make Rain Animation Using HTML,CSS and Javascript?Animating Rain







How To Make Rain Animation Using HTML,CSS and Javascript?Animating Rain

 

 Welcome to today’s tutorial. Today we are going to create a Rain Animation. For this, we are going to use HTML, CSS and Javascript.

 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 SERVER:- 

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

See the Pen Meteor Effect With CSS & JavaScript by Evan (@raqsqnhj) on CodePen.

 

HTML:-

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>

 

CSS:- 

Linear Gradient:-

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 colour.

 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
@keyframes raining
0%
transform: translateY(-160px)
100%
transform: translateY(calc(100vh + 160px))

 

 Javascript:-

  •  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 element() is used to create element and element.append child is used to insert child.

      We have made many children as the rain droplets and insert in the body tag.

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

      animation time and animation delay also given to the droplets.

      we are using  a random function of math library of javscript 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();

 

 code credits :-Evan

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

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.

You can follow me on Instagram.

Written by @Himanshu Singh.
Share on:

Leave a Comment