Ajouter des effets de confettis avec JavaScript : un guide pratique

Vous souhaitez ajouter des moments de célébration à votre application web ? Les animations de confettis JavaScript transforment les interactions ordinaires en expériences mémorables. Que vous célébriez un achat réussi, la complétion d’un formulaire ou le déblocage d’un succès, les confettis ajoutent cette étincelle de plaisir dont les utilisateurs se souviennent.

Ce guide couvre deux approches pratiques : construire un effet de confettis léger avec HTML Canvas à partir de zéro, et utiliser des bibliothèques prêtes pour la production comme js-confetti et canvas-confetti pour une implémentation plus rapide.

Choisir votre approche pour les confettis

Intégration rapide de bibliothèque (2 minutes pour déployer)

Pour la plupart des applications en production, les bibliothèques établies d’animation de confettis JavaScript offrent le meilleur équilibre entre fonctionnalités et simplicité.

js-confetti se distingue par son architecture sans dépendances et son support des emojis :

<!-- Installation via CDN -->
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>

// Utilisation basique
const jsConfetti = new JSConfetti()

// Déclencher des confettis colorés
jsConfetti.addConfetti({
  confettiColors: ['#ff0a54', '#ff477e', '#ff7096'],
  confettiNumber: 100
})

// Ou utiliser des emojis
jsConfetti.addConfetti({
  emojis: ['🎉', '✨', '💫', '🎊'],
  emojiSize: 50,
  confettiNumber: 30
})

canvas-confetti offre davantage de personnalisation physique :

<!-- Installation via CDN -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@latest/dist/confetti.browser.min.js"></script>

// Effet de feu d'artifice depuis une origine spécifique
confetti({
  particleCount: 100,
  spread: 70,
  origin: { x: 0.5, y: 0.6 }, // Centre, légèrement sous le milieu
  colors: ['#bb0000', '#ffffff']
})

Les deux bibliothèques sont légères, bien maintenues et gèrent le nettoyage automatiquement. La bibliothèque js-confetti retourne une Promise lorsque les animations sont terminées, ce qui la rend parfaite pour enchaîner des actions :

await jsConfetti.addConfetti()
console.log('Célébration terminée !')
// Passer à l'action suivante

Construire des confettis Canvas vanilla (zéro dépendances)

Pour un contrôle complet ou lorsque chaque octet compte, une implémentation de confettis HTML Canvas vanilla nécessite un code minimal :

const canvas = document.getElementById('confetti-canvas')
const ctx = canvas.getContext('2d')
const particles = []

// Redimensionner le canvas à la fenêtre
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// Créer une particule avec des propriétés aléatoires
function createParticle() {
  return {
    x: Math.random() * canvas.width,
    y: -10,
    vx: (Math.random() - 0.5) * 2,
    vy: Math.random() * 3 + 2,
    color: `hsl(${Math.random() * 360}, 70%, 50%)`,
    size: Math.random() * 3 + 2
  }
}

// Boucle d'animation
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  particles.forEach((p, index) => {
    p.x += p.vx
    p.y += p.vy
    p.vy += 0.1 // Gravité
    
    ctx.fillStyle = p.color
    ctx.fillRect(p.x, p.y, p.size, p.size)
    
    // Supprimer les particules hors écran
    if (p.y > canvas.height) {
      particles.splice(index, 1)
    }
  })
  
  if (particles.length > 0) {
    requestAnimationFrame(animate)
  }
}

// Déclencher une explosion de confettis
function triggerConfetti() {
  for (let i = 0; i < 100; i++) {
    particles.push(createParticle())
  }
  animate()
}

Cette approche vous donne un contrôle total sur la physique, les formes des particules et le rendu. Cependant, vous devrez gérer vous-même le nettoyage, l’optimisation des performances et la compatibilité des navigateurs.

Bonnes pratiques en production pour les effets de confettis

Respecter les préférences des utilisateurs

Vérifiez toujours la sensibilité au mouvement avant de déclencher des effets d’animation de confettis JavaScript :

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

if (!prefersReducedMotion) {
  jsConfetti.addConfetti()
} else {
  // Afficher un message de succès statique à la place
  showSuccessMessage()
}

Optimiser pour les performances mobiles

Maintenez des nombres de particules raisonnables pour des expériences mobiles fluides :

const isMobile = window.innerWidth < 768
const particleCount = isMobile ? 50 : 150

jsConfetti.addConfetti({
  confettiNumber: particleCount
})

Nettoyer après les célébrations

canvas-confetti gère le nettoyage automatiquement. js-confetti fournit une méthode clearCanvas() pour réinitialiser le canvas, bien qu’elle n’annule pas les animations déjà en cours. Pour les implémentations vanilla, nettoyez toujours les ressources :

// Pour js-confetti
jsConfetti.clearCanvas()

// Pour une implémentation vanilla
function cleanup() {
  particles.length = 0
  ctx.clearRect(0, 0, canvas.width, canvas.height)
}

Modèles d’utilisation stratégiques

Les effets de confettis fonctionnent mieux lorsqu’ils sont réservés aux moments véritablement festifs :

• ✅ Finalisation d’un achat
• ✅ Succès de création de compte
• ✅ Succès débloqué
• ✅ Jalon atteint
• ❌ Chaque clic de bouton
• ❌ Chargements de page
• ❌ Interactions mineures

Exemples d’implémentation

Célébration au clic de bouton

document.getElementById('purchase-btn').addEventListener('click', async () => {
  // Traiter d'abord l'action
  const success = await processPurchase()
  
  if (success) {
    // Puis célébrer
    jsConfetti.addConfetti({
      confettiColors: ['#00ff00', '#ffffff'],
      confettiNumber: 75
    })
  }
})

Confettis basés sur la position

Seul canvas-confetti prend en charge le déclenchement de confettis depuis des positions précises à l’écran. Avec js-confetti, les confettis remplissent toujours le canvas sans contrôle d’origine.

// canvas-confetti : Déclencher depuis les coordonnées du clic de souris
element.addEventListener('click', (e) => {
  confetti({
    particleCount: 80,
    spread: 70,
    origin: {
      x: e.clientX / window.innerWidth,
      y: e.clientY / window.innerHeight
    }
  })
})

Cela vous permet de créer des effets comme des explosions depuis un bouton cliqué, des canons latéraux ou des feux d’artifice à des emplacements spécifiques.

Conclusion

Les effets de confettis JavaScript transforment les interactions routinières en moments mémorables. Bien que les implémentations Canvas vanilla offrent un contrôle complet, les bibliothèques comme js-confetti et canvas-confetti fournissent des solutions prêtes pour la production qui gèrent les complexités de la compatibilité multi-navigateurs, l’optimisation des performances et le nettoyage.

Choisissez les bibliothèques lorsque vous avez besoin d’une implémentation rapide et fiable avec de bons paramètres par défaut. Construisez en vanilla lorsque vous avez besoin d’un contrôle précis ou de zéro dépendances. Dans tous les cas, rappelez-vous que les meilleurs confettis sont utilisés avec parcimonie—réservez-les aux moments qui méritent vraiment d’être célébrés.

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.