In this tutorial, we’ll walk you through the process of creating a dazzling fireworks animation using HTML, CSS, and JavaScript. This interactive effect allows users to trigger colorful fireworks explosions with a simple click, perfect for celebration pages, New Year effects, or event websites. Let’s bring some excitement to your webpage with this beautiful animation! 🎇✨
What You’ll Learn:
- How to Create Fireworks Particles Using HTML & CSS 🎨
- Styling Smooth Explosion Effects with CSS Animations 💥
- Using JavaScript to Generate Random Fireworks Dynamically 🔥
- Adding Realistic Motion Effects for a Mesmerizing Experience ✨
- Customizing the Fireworks to Fit Your Website’s Theme 🎯
Steps to Create the Fireworks Animation:
Step 1: HTML Structure
The structure is simple; we’ll be generating the fireworks dynamically using JavaScript, so the HTML body will remain empty until the user clicks. Here’s the basic layout of the HTML:
<body>
<script>
document.addEventListener("click", function(event) {
for (let i = 0; i < 30; i++) {
let firework = document.createElement("div");
firework.classList.add("firework");
document.body.appendChild(firework);
let x = event.clientX;
let y = event.clientY;
let angle = Math.random() * 2 * Math.PI;
let distance = Math.random() * 100;
let fx = x + Math.cos(angle) * distance;
let fy = y + Math.sin(angle) * distance;
firework.style.left = `${x}px`;
firework.style.top = `${y}px`;
firework.style.transform = `translate(${fx - x}px, ${fy - y}px)`;
firework.style.animationDelay = `${Math.random() * 0.5}s`;
setTimeout(() => firework.remove(), 1500);
}
});
</script>
</body>
This JavaScript listens for click events and dynamically creates 30 firework particles that explode outwards from the point where the user clicked.
Step 2: CSS Styling and Animation
Now let’s move on to the styling and animation for the fireworks. We want the fireworks to have a smooth explosion effect that spreads out in all directions. Here’s the CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
overflow: hidden;
height: 100vh;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
background: radial-gradient(white, transparent);
border-radius: 50%;
opacity: 0;
animation: explode 1.5s ease-out forwards;
}
@keyframes explode {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(3);
}
}
Here, we use a radial-gradient for the firework particles, which gives the effect of a glowing explosion. The keyframes define the animation for the explosion effect, where the particles start small and gradually expand while fading out.
Step 3: JavaScript for Dynamic Generation
When the user clicks on the page, the JavaScript generates random fireworks particles at different angles and distances. The particles are placed where the user clicks, and each particle has a small delay before it starts its animation, giving the effect of a burst.
document.addEventListener("click", function(event) {
for (let i = 0; i < 30; i++) {
let firework = document.createElement("div");
firework.classList.add("firework");
document.body.appendChild(firework);
let x = event.clientX;
let y = event.clientY;
let angle = Math.random() * 2 * Math.PI;
let distance = Math.random() * 100;
let fx = x + Math.cos(angle) * distance;
let fy = y + Math.sin(angle) * distance;
firework.style.left = `${x}px`;
firework.style.top = `${y}px`;
firework.style.transform = `translate(${fx - x}px, ${fy - y}px)`;
firework.style.animationDelay = `${Math.random() * 0.5}s`;
setTimeout(() => firework.remove(), 1500);
}
});
Each time the user clicks, the script:
- Creates a new firework particle.
- Randomly generates the direction and distance for the particle.
- Animates the particle using CSS animations, expanding and fading it out.
Customizing the Fireworks
You can easily customize the fireworks to match your website’s theme:
- Change the colors of the fireworks by adjusting the
backgroundproperty in the.fireworkclass. - Adjust the size and speed of the explosion by modifying the
animationproperties. - Add more particles or adjust the randomness to make the fireworks more intense.
Demo & Code Repository
Check out the live demo of this fireworks animation:
You can also access the full source code on GitHub:
Complete Source Code on GitHub
If you enjoyed this tutorial, don’t forget to like, comment, and subscribe for more creative web development tutorials! 🚀🎉
#HTML #CSS #JavaScript #Fireworks #Animation #WebDesign #FrontendDevelopment #WebDevelopment #TechTutorial #CreativeCoding #InteractiveDesign