Fireworks
Un bouton propulse 3 roquettes DOM en décalé qui montent et explosent chacune en 30–50 éclats colorés — Web Animations API, zéro canvas, zéro boucle rAF persistante.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur la Web Animations API (element.animate()) et des <div> DOM — aucun <canvas>, aucun requestAnimationFrame permanent. Au clic sur #fireworksBtn, trois roquettes se lancent avec un décalage de 200 ms entre chacune (setTimeout(fn, f * 200)). La position X de départ est tirée aléatoirement dans les 80 % centraux du conteneur via getBoundingClientRect() ; le Y de départ est fixé à 30 px depuis le bas.
Chaque roquette est une <div> (.firework-trail) animée de startY jusqu'à targetY (entre 40 et 120 px depuis le haut) en 400 ms avec un easing ease-out. À la fin de l'animation (.onfinish), le trail est retiré du DOM et l'explosion se déclenche immédiatement à la même coordonnée.
L'explosion crée entre 30 et 50 <div> particules (.firework) positionnées à la cible. Les angles de dispersion sont répartis uniformément sur 2π ((2π / particleCount) × i + jitter ≤ 0,5 rad) pour un éventail homogène. La vitesse radiale varie de 50 à 130 px. Le déplacement suit cubic-bezier(0, 0.5, 0.5, 1) — sortie rapide, arrivée molle — qui simule décélération gravitationnelle et traînée. Un décalage vertical de +30 px en position finale reproduit la tombée légère des étincelles. Le glow est rendu par un double box-shadow coloré sur chaque particule.
Le nettoyage est entièrement automatique : onfinish = () => particle.remove() supprime chaque élément dès la fin de son animation (800–1200 ms). Il n'y a ni pool d'objets, ni boucle active entre deux clics — le thread principal est libéré dès que la dernière particule disparaît.
Accessibilité
- prefers-reduced-motion : non géré — aucun bloc
matchMedia('(prefers-reduced-motion: reduce)')n'existe dans le code. Les 3 explosions se déclenchent quelle que soit la préférence OS. À intégrer avant tout déploiement sur un site accessible : soit ignorer le clic, soit réduire à 1 roquette et 15 particules. - Le bouton
.fireworks-btnest un<button>natif — focusable au clavier, activable avec Entrée ou Espace, sans JavaScript supplémentaire requis. - Le conteneur
.fireworks-containerne porte pas deroleni d'aria-label. Les<div>particules créées dynamiquement ne reçoivent pas d'annonce lecteur d'écran, ce qui est neutre pour un effet purement décoratif. - Le texte blanc du bouton sur le dégradé ambre–rouge (luminosité perçue ≈ 0,24) tient le ratio WCAG AA ≥ 4,5:1.
- Aucun contenu informatif n'est transmis uniquement par l'animation : l'état applicatif doit être communiqué par d'autres moyens (texte, aria-live).
Compatibilité navigateur
Nécessite la Web Animations API (Element.animate()) — supportée dans tous les navigateurs modernes. Zéro canvas, zéro dépendance externe.
Si <code>Element.animate</code> est absent (navigateurs très anciens), les particules sont créées dans le DOM mais aucune animation n'a lieu — elles apparaissent et disparaissent au même endroit sans mouvement. Pas d'erreur JS fatale, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="fireworks-container" id="fireworksContainer">
<button class="fireworks-btn" id="fireworksBtn">Launch!</button>
<!-- .firework-trail et .firework : injectés puis retirés automatiquement par le JS -->
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| fireworkColors (tableau JS) | 7 couleurs arc-en-ciel | Tableau des couleurs hex des roquettes et particules. Remplacez-le avant l'appel à addEventListener pour imposer votre palette brand. |
| Boucle roquettes : f < 3 | 3 | Nombre de roquettes par clic. Modifiez la borne supérieure de la boucle for (let f = 0; f < N; f++) : 1 pour un tir unitaire, 5 pour un bouquet festif. |
| particleCount : 30 + Math.floor(Math.random() * 20) | 30–50 par roquette | Fourchette de particules par explosion. Réduisez à 15 + Math.floor(Math.random() * 10) pour alléger sur appareils lents. |
| velocity : 50 + Math.random() * 80 | 50–130 px | Rayon d'explosion en pixels. Augmentez la partie fixe (ex. : 80 + Math.random() * 120) pour des gerbes plus larges. |
| Durée trail : 400 (ms) | 400 ms | Durée de montée de la roquette. Réduisez à 200 ms pour une explosion plus immédiate, augmentez à 700 ms pour un effet plus dramatique. |
| Durée particule : 800 + Math.random() * 400 | 800–1200 ms | Durée de vie de chaque éclat. La variation aléatoire évite un déclenchement simultané des onfinish. Réduisez à 500 + Math.random() * 200 pour une animation plus nette. |
| targetY : 40 + Math.random() * 80 | 40–120 px depuis le haut | Zone d'explosion dans le conteneur. Réduisez la plage (30 + Math.random() * 40) pour concentrer les explosions en haut, ou augmentez-la pour les répartir sur toute la hauteur. |
FAQ
window. Pour déclencher depuis un événement métier (confirmation Stripe, jalon atteint), appelez document.getElementById('fireworksBtn').click() dans votre callback, ou extrayez la logique de tir dans une fonction nommée avant de la lier au bouton.<div> créés puis retirés en ≤ 1,2 s. Sur les appareils lents, réduisez le nombre de roquettes (f < 2) ou la fourchette haute des particules (20 + Math.floor(Math.random() * 10)) pour maintenir 60 fps.data-attribute. Les couleurs sont définies par le tableau fireworkColors dans l'IIFE. Pour personnaliser sans dupliquer tout le script, exposez ce tableau en variable externe avant l'IIFE (let FWK_COLORS = ['#6366f1',…]) et modifiez-la à la volée depuis votre propre code.
