Hello Readers!, This is an CSS and JavaScript code to create a colorful rain animation. The JavaScript code creates 250 “i” elements and sets random values for their position, size, animation delay, and duration. The CSS styles the body to have a black background and sets the position of each “i” element to be absolute. The i elements have a linear gradient color and an animation with a hue-rotate filter that changes its color over time. The animation moves the “i” elements from the top of the viewport to below the bottom of the viewport over a duration of 5 seconds.
Video Tutorial of Colorful Rain Animation Effects
To see a live demonstration of the Colorful Rain Animation Effects, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Colorful Rain Animation Effects
HTML:
Create a new file with the name “index.html” and add the provided code to it. Ensure the file has a “.html” extension.
<!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>Colorful Rain Animation</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
</body>
</html>
This is the basic structure of an HTML document, but it does not have any content in the body. To create a colorful rain animation, you could add the necessary HTML, CSS, and JavaScript to the body. The styles for the animation could be placed in the linked “style.css” file, while the animation logic could be written in JavaScript and added to the body.
CSS:
Create a new CSS file named “style.css” and copy the provided code into it. Ensure that the file has a “.css” extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: #000;
overflow: hidden;
}
i{
position: absolute;
width: 10px;
height: 200px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: linear-gradient(45deg, #d0150c, transparent);
animation: animColorFulRain 5s linear infinite;
}
i:nth-child(3n+1){
background: linear-gradient(45deg, #d0150c, transparent);
}
i:nth-child(3n+2){
background: linear-gradient(45deg, #5c13ae, transparent);
}
i:nth-child(3n+1){
background: linear-gradient(45deg, #00ff62, transparent);
}
@keyframes animColorFulRain{
0%{
filter: hue-rotate(0deg);
transform: translateY(-200px);
}
100%{
filter: hue-rotate(360deg);
transform: translateY(calc(100vh + 200px));
}
}
This is a CSS code for creating an animation of colorful raindrops. The code styles an HTML body element with a black background and sets the minimum height to 100 viewport units. An i tag is styled to represent each raindrop, with an absolute position, a width and height, and rounded borders on the bottom left and right corners. The raindrop has a gradient background with a color determined by the nth-child selector. The animation of the raindrop is achieved with a @keyframes animation that changes the hue rotation and translates the raindrop’s position over a 5 second duration, repeating indefinitely.
JavaScript:
In between the <body></body> tags, you can include JavaScript code by enclosing it within <script> tags.
function rain(){
let amount = 250;
let body = document.querySelector('body');
let i = 1;
while(i < 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.left = posX + 'px';
drop.style.animationDelay = delay+'s';
drop.style.animationDuration = 1 + duration + 's';
body.appendChild(drop);
i++;
}
}
rain();
This JavaScript code creates the rain animation. The function rain generates 250 “i” elements and sets their style properties randomly. It selects the body of the HTML document and appends each newly created “i” element to it. The “left” property sets the horizontal position of each drop, “animationDelay” sets a random time delay for each drop before it starts animating and “animationDuration” sets a random duration for the animation. Finally, it calls the rain function to start the animation.
Summary:
This code is a HTML/CSS/JavaScript animation of a colorful rain. The HTML page includes a link to a CSS stylesheet, and a JavaScript function “rain()” that creates 250 raindrops using the HTML element ‘i’. The position, delay, and duration of each raindrop is determined by random numbers generated by JavaScript. The CSS stylesheet sets the appearance of the ‘i’ element as an absolute positioned column with a gradient background color and an animation of falling down. The animation is created using CSS keyframes.
