You are currently viewing Create Rain Animation Using HTML,CSS and JavaScript

Create Rain Animation Using HTML,CSS and JavaScript

Create Rain Animation Using HTML,CSS and JavaScript

 

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

Welcome to today’s tutorial. In this article, we are going to create a Rain Animation. For Rain Animation we are going to use HTML, CSS, and JavaScript Code.

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

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>

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));
  }
}

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();

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.

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.

Written by @Himanshu Singh.

Leave a Reply