Imagine making your web page more interactive and lively with a beautiful burst of colorful confetti whenever a user clicks! 🎉 In this blog post, I’ll walk you through a fun project where we’ll create a confetti burst animation using pure HTML, CSS, and JavaScript — no libraries needed!
Let’s dive right into it!
1. The Basic Setup
We start with a simple HTML structure. Nothing fancy here — just linking a style.css for styles and a script.js for the functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Confetti Bursts</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
2. Styling the Confetti:
Now, let’s add the CSS magic!
We’ll set a dark background to make the colors pop, hide scrollbars with overflow: hidden, and change the cursor to a pointer to hint at interactivity.
body {
margin: 0;
height: 100vh;
background-color: #121212;
overflow: hidden;
cursor: pointer;
}
.confetti {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
/* Animation for the confetti particles */
@keyframes burst {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(var(--x), var(--y));
opacity: 0;
}
}
3.Javascript:
The JavaScript code is responsible for creating and animating the confetti particles. When the user clicks anywhere on the page, the createConfetti(x, y) function is triggered with the mouse coordinates. Inside this function, we generate 100 confetti pieces, each assigned a random size and color. The direction each piece moves in is calculated using trigonometric functions (Math.cos and Math.sin) to evenly spread them around a circle. We dynamically set CSS variables --x and --y for each piece, which control how far and in which direction the confetti moves during the animation. Each piece is given a random animation duration to make the movement feel more natural and lively. Finally, to keep the page clean and performant, we remove each confetti element from the DOM after 3 seconds once their animation finishes.
function getRandomColor() {
const colors = [
"#ff5252",
"#ffeb3b",
"#4caf50",
"#03a9f4",
"#ff9800",
"#e91e63",
"#00e676",
];
return colors[Math.floor(Math.random() * colors.length)];
}
function createConfetti(x, y) {
const confettiCount = 100;
const radius = 200;
for (let i = 0; i < confettiCount; i++) {
const angle = (2 * Math.PI * i) / confettiCount;
const xDirection = Math.cos(angle) * radius;
const yDirection = Math.sin(angle) * radius;
const confetti = document.createElement("div");
confetti.classList.add("confetti");
confetti.style.width = `${Math.random() * 6 + 4}px`;
confetti.style.height = confetti.style.width;
confetti.style.backgroundColor = getRandomColor();
confetti.style.top = `${y}px`;
confetti.style.left = `${x}px`;
confetti.style.setProperty("--x", `${xDirection}px`);
confetti.style.setProperty("--y", `${yDirection}px`);
confetti.style.animation = `burst ${
Math.random() * 1.5 + 0.15
}s ease-out forwards`;
document.body.appendChild(confetti);
setTimeout(() => {
confetti.remove();
}, 3000); // Clean up after 3 seconds
}
}
// Event listener to trigger confetti on click
document.body.addEventListener("click", (e) => {
createConfetti(e.pageX, e.pageY);
});
Conclusion:
Adding interactive effects like a confetti burst can make your website feel more fun, engaging, and memorable for users. With just a few lines of HTML, CSS, and JavaScript, we created a beautiful visual experience that responds instantly to user clicks. This project not only shows the power of combining simple animations with dynamic JavaScript but also opens the door to endless creativity. Whether you use it for celebrations, gamification, or just to surprise your visitors, small touches like these can make a big difference in the overall user experience. So keep experimenting, keep learning, and most importantly, have fun coding!
