New Year is a time for celebrations, and what better way to celebrate digitally than with a simple fireworks animation? In this article, we'll walk through how to create a basic fireworks display using HTML, CSS, and JavaScript. Don't worry if you're new to coding - we'll take it step by step.
Creating Simple New Year Fireworks Animation with HTML, CSS, and JavaScript with Demo
Step 1: HTML Setup
First, we set up the basic structure of our webpage using HTML. Think of HTML as the skeleton of your webpage.
<!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>New Year Celebration</title>
<!-- Add the Google Fonts link -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap">
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
</body>
Step 2: Styling with CSS
CSS adds style to our webpage. Here, we make sure our canvas takes up the whole screen.
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
</style>
Step 3: Adding the Fireworks with JavaScript
JavaScript makes our webpage interactive. We'll use it to create a simple fireworks display on the canvas.
<script>
window.addEventListener("resize", resizeCanvas);
window.addEventListener("DOMContentLoaded", onLoad);
const dynamicText = "Happy New Year";
const probability = 0.04;
let canvas, ctx, w, h, particles = [], xPoint, yPoint, displayText = false;
function onLoad() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
resizeCanvas();
window.requestAnimationFrame(updateWorld);
window.setTimeout(() => { displayText = true; }, 3000);
}
function resizeCanvas() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
function updateWorld() {
update();
paint();
window.requestAnimationFrame(updateWorld);
}
function update() {
if (particles.length < 500 && Math.random() < probability) {
createFirework();
}
particles = particles.filter(particle => particle.move());
}
function paint() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
particles.forEach(particle => particle.draw(ctx));
if (displayText) {
ctx.fillStyle = getRandomColor();
ctx.font = "italic bold 50px 'Dancing Script', cursive";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(dynamicText, w / 2, h / 2);
}
}
function createFirework() {
xPoint = Math.random() * (w - 200) + 100;
yPoint = Math.random() * (h - 200) + 100;
const nFire = Math.random() * 50 + 100;
const c = getRandomFireworkColor();
for (let i = 0; i < nFire; i++) {
const particle = new Particle(c);
particles.push(particle);
}
}
function Particle(color) {
this.w = this.h = Math.random() * 4 + 1;
this.x = xPoint - this.w / 2;
this.y = yPoint - this.h / 2;
this.vx = (Math.random() - 0.5) * 10;
this.vy = (Math.random() - 0.5) * 10;
this.alpha = Math.random() * 0.5 + 0.5;
this.color = color;
}
Particle.prototype = {
gravity: 0.05,
move: function () {
this.x += this.vx;
this.vy += this.gravity;
this.y += this.vy;
this.alpha -= 0.01;
return !(this.x <= -this.w || this.x >= w || this.y >= h || this.alpha <= 0);
},
draw: function (c) {
c.save();
c.beginPath();
c.translate(this.x + this.w / 2, this.y + this.h / 2);
c.arc(0, 0, this.w, 0, Math.PI * 2);
c.fillStyle = this.color;
c.globalAlpha = this.alpha;
c.closePath();
c.fill();
c.restore();
}
};
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getRandomFireworkColor() {
const colors = ["#FF5252", "#FFD740", "#64B5F6", "#69F0AE", "#FF4081"];
return colors[Math.floor(Math.random() * colors.length)];
}
</script>
Wrapping Up
And that's it! With a bit of HTML, CSS, and JavaScript, you can create a simple New Year fireworks animation. Play around with the code, see what happens when you tweak things, and most importantly, have fun coding! Wishing you a Happy New Year filled with joy and learning. ?
