Canvas Confetti – Mettez de la joie sur votre site web avec cette lib d’explosion de confettis
samedi 10 février 2024 à 09:00
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-confettiImportez 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.
