How to Create Confetti Falling Animation in JavaScript

June 03, 2021
Confetti Falling Animation in JavaScript


Confetti Falling Animation in JavaScript

How to create beautiful confetti falling animation effect in javascript?

So, here I am creating this effect using HTML, CSS, and JavaScript, This is very simple, easy and proudly my own code there is no use of any plugin in it.

Watch Video Tutorial


Live Preview

HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Confetti Falling Animation Using HTML, CSS and JavaScript</title>
	<!-- Style Sheet -->
	<link rel="stylesheet" href="css/style.css">
</head>

<body>

	<div class="box" id="box"></div>

	<!-- JavaScript -->
	<script src="js/main.js"></script>
</body>

</html>

CSS Code

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.box{
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.confetti{
	position: absolute;
	top: -100px;
}
/* Start Animation */
.confetti:nth-child(100n+2){
	animation: animateStart 1.5s ease 1;
}
.confetti:nth-child(100n+4){
	animation: animateStart 1.4s ease 1;
}
.confetti:nth-child(1000n+0){
	animation: animateStart 1.6s ease 1;
}
@keyframes animateStart{
	0%{
		top: 100%;
		left: 50%;
		box-shadow: 0 0 5px #000;
	}
	100%{
		transform: rotate3d(1,1,1,360deg);
		top: -100px;
	}
}
/* Falling Animation */
.confetti:nth-child(100n+0){
	animation: animateThree 3.4s linear 0.5s 3;
}
.confetti:nth-child(100n+1){
	animation: animate 4s linear 3;
}
.confetti:nth-child(100n+3){
	animation: animate 4.2s linear 0.5s 3;
}
.confetti:nth-child(100n+5){
	animation: animateTwo 3s linear 0.5s 3;
}
.confetti:nth-child(100n+6){
	animation: animateTwo 2.9s linear 0.5s 3;
}
.confetti:nth-child(100n+7){
	animation: animate 2.8s linear 0.5s 3;
}
.confetti:nth-child(100n+8){
	animation: animate 2.7s linear 0.5s 3;
}
.confetti:nth-child(100n+9){
	animation: animate 2.6s linear 0.5s 3;
}
.confetti:nth-child(100n+10){
	animation: animate 2.5s linear 0.5s 3;
}
@keyframes animate{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(1,1,1,360deg);
		top: 100%;
	}
}
@keyframes animateTwo{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(0,0,1,360deg);
		top: 100%;
	}
}
@keyframes animateThree{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(0,1,0,360deg);
		top: 100%;
	}
}

JavaScript Confetti Animation Custom Code

function confettiFalling() {

	var box = document.getElementById("box");
	var colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink'];

	for (var i = 0; i < 1000; i++) {
		
		// Create 1000 DIV elements for confetti
		var div = document.createElement("div");
		div.classList.add("confetti");
		box.appendChild(div);
	}

	var confetti = document.querySelectorAll('.confetti');

	for (var i = 0; i < confetti.length; i++) {
		
		var size = Math.random() * 0.01 * [i];

		confetti[i].style.width = 5 + size + 'px';
		confetti[i].style.height = 16 + size + 'px';
		confetti[i].style.left = Math.random() * innerWidth + 'px';

		var background = colors[Math.floor(Math.random() * colors.length)];
		confetti[i].style.backgroundColor = background;

		box.children[i].style.transform = "rotate("+ size*[i] +"deg)";
	}
}
confettiFalling();

Quote Maker UI Design in Adobe XD
Convert Quote Maker UI Design into HTML CSS

Tags

Post a Comment

0 Comments