Si vous codez vous-même votre site web et que vous avez envie d’ajouter un peu de fiesta, de bonne humeur et de célébration à celui-ci, j’ai la lib qu’il vous faut.

Cela s’appelle Canvas Confetti et ça permet d’ajouter en animation de confetti, d’émoji ou de neige à vos pages web.

Pour l’installer, rien de plus simple:

npm install canvas-confetti

Importez ensuite la bibliothèque Canvas Confetti dans votre fichier JavaScript où vous souhaitez utiliser l’animation du confetti comme ceci :

import confetti from 'canvas-confetti';

Pour lancer l’animation du confetti, appelez la fonction confetti() sans paramètres ou avec des options personnalisées. Voici un exemple de lancement de l’animation par défaut :

confetti();

Et voici un exemple de lancement de l’animation avec des options personnalisées :

confetti({
  particleCount: 150, // Nombre de confetti à lancer
  spread: 180, // Angle maximal de dispersion des confettis
  startVelocity: 30, // Vitesse initiale des confettis
  origin: {
    x: Math.random(), // Position initiale aléatoire des confettis sur l'axe horizontal
    y: Math.random() - 0.2 // Position initiale légèrement plus élevée sur l'axe vertical
  },
  colors: ['#ff0000', '#00ff00', '#0000ff'], // Couleurs des confettis
  shapes: ['square', 'circle', 'star'], // Formes des confettis
  scalar: 2 // Taille des confettis
});

Pour réinitialiser l’animation du confetti et effacer tous les confettis en cours d’animation, utilisez la méthode confetti.reset() :

confetti.reset();

Si vous souhaitez limiter l’espace sur votre page où les confettis apparaissent, vous pouvez utiliser un canvas personnalisé. Pour cela, créez un élément <canvas> dans votre HTML et appelez la fonction confetti.create() en lui passant l’élément <canvas> et des options globales facultatives :

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const myConfetti = confetti.create(canvas, { // Options globales facultatives
  resize: true, // Permet de redimensionner le canvas en fonction de la fenêtre
  useWorker: true // Utilise un web worker pour le rendu du confetti
});

myConfetti({ // Options personnalisées
  particleCount: 100,
  spread: 160
  // Autres options personnalisées
});

Enfin, si vous souhaitez créer des confettis personnalisés à partir d’une forme SVG ou d’un texte, utilisez les méthodes confetti.shapeFromPath et confetti.shapeFromText :

const pathShape = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' }); // Forme SVG

const textShape = confetti.shapeFromText({ text: '🐈', scalar: 2 }); // Texte personnalisé

confetti({
  shapes: [pathShape, textShape],
  scalar: 2
});

Le mieux reste d’aller faire un tour sur la page de démo qui comporte également des exemples d’intégration.