Simple New Year Fireworks Animation with HTML, CSS, and JavaScript with Demo - TechvBlogs

Simple New Year Fireworks Animation with HTML, CSS, and JavaScript with Demo

Learn to create a vibrant New Year fireworks animation using just HTML, CSS, and JavaScript.


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
 

2 months ago

TechvBlogs - Google News

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. ?

Comments (0)

Comment


Note: All Input Fields are required.