Feu d’artifice sur votre page web – 2D Online

Pour réaliser un effet de feu d’artifice sur une page web, on peut utiliser un mélange de HTML, CSS et JavaScript. Une bibliothèque comme Canvas API (HTML5) est particulièrement utile pour dessiner et animer les explosions. Voici un exemple simple :

Exemple de Feu d’artifice avec Canvas

1. Structure HTML

Ajoutez une balise <canvas> dans votre fichier HTML pour dessiner les feux d’artifice.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feu d'artifice en superposition</title>
    <style>
        /* Styles pour le contenu existant */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }
        .content {
            padding: 20px;
        }

        /* Canvas pour le feu d'artifice */
        #fireworks {
            position: fixed; /* Superposition sur tout l'écran */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Permet de cliquer à travers le canvas */
            z-index: 9999; /* Par-dessus tout le contenu */
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Bienvenue sur ma page !</h1>
        <p>Le contenu de la page reste interactif pendant que les feux d'artifice s'affichent en arrière-plan.</p>
    </div>

    <!-- Canvas pour l'animation des feux d'artifice -->
    <canvas id="fireworks"></canvas>
    <script src="fireworks.js"></script>
</body>
</html>

2. CSS

La feuille de style incluse ici met simplement en place un fond noir et supprime les marges pour que l’animation occupe tout l’écran.

3. JavaScript : Création des Feux d’artifice

Créez un fichier fireworks.js pour gérer les animations.

const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');

// Ajuste la taille du canvas pour couvrir tout l'écran
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

// Tableau pour stocker les particules
let particles = [];

class Particle {
    constructor(x, y, color, velocity, size) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.velocity = velocity;
        this.size = size;
        this.opacity = 1;
    }

    update() {
        this.x += this.velocity.x;
        this.y += this.velocity.y;
        this.opacity -= 0.02; // Effacement progressif
    }

    draw() {
        ctx.save();
        ctx.globalAlpha = this.opacity;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }
}

// Fonction pour lancer un feu d'artifice
function launchFirework() {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height * 0.5; // Haut de l'écran
    const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
    const color = colors[Math.floor(Math.random() * colors.length)];
    const particleCount = 50 + Math.random() * 50;

    for (let i = 0; i < particleCount; i++) {
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 4 + 1;
        particles.push(new Particle(
            x,
            y,
            color,
            { x: Math.cos(angle) * speed, y: Math.sin(angle) * speed },
            Math.random() * 3 + 1
        ));
    }
}

// Animation principale
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Efface le canvas

    particles = particles.filter(particle => particle.opacity > 0); // Supprime les particules invisibles
    particles.forEach(particle => {
        particle.update();
        particle.draw();
    });

    if (Math.random() < 0.05) { // Probabilité de lancer un feu d'artifice
        launchFirework();
    }

    requestAnimationFrame(animate);
}

// Démarrer l'animation
animate();

Fonctionnalités Avancées

Ajout de son : Jouez des sons au moment de l’explosion. const audio = new Audio('explosion.mp3'); audio.play();
Réglage des couleurs dynamiques : Utilisez des dégradés ou des couleurs arc-en-ciel.
Interaction utilisateur : Ajoutez un événement click pour que l’utilisateur puisse déclencher un feu d’artifice. canvas.addEventListener('click', (event) => { launchFirework(event.clientX, event.clientY); });

Avec ce code, vous avez un feu d’artifice interactif et visuel directement sur votre page web ! 🎆