Créer une explosion de confettis en JS en quelques secondes !

Pour quoi faire ?

Lorsque l'on travaille sur l'expérience utilisateur, l'une des mécaniques incontournables est la récompense de l'utilisateur (ou l'utilisatrice).

En effet, votre application ou votre site, a normalement pour but d'apporter de la valeur à la personne qui va l'utiliser et donc il doit y avoir un chemin le plus clair possible du début jusqu'à la livraison de cette valeur !

Chaque étape doit motiver la personne à continuer l'expérience, et ceci est fait grâce à un système de récompenses

Une récompense ne signifie pas forcément un cadeau, mais peut simplement être un message de félicitation, un badge ou... une animation ! L'avantage d'une animation, accompagnée d'un message personnalisé, c'est que l'effet visuel est surprenant, et donc l'émotion positive est renforcée.

Et si une animation pareille pouvait s'intégrer en quelques secondes ?

La bibliothèque "canvas-confetti" !

Cette bibliothèque va vous permettre de déclencher une explosion de confettis sur n'importe laquelle de vos pages web, et incluant un script (ou un paquet NPM), et un canvas vierge !

Voici ce que ça donne avec la configuration de base :

Essayez-moi !

Si vous voulez le mettre en place, je vous recommande d'aller directement sur la documentation GitHub du projet, vous y trouverez toutes les étapes pour démarrer, mais surtout pleins de configurations pour modifier l'animation à votre sauce (couleurs, tailles, vitesse, direction,...) !

Vous pouvez également trouver d'autres démos juste ici !

Exemple de code

Voilà le code exact qui implémente l'animation basique présente dans l'article, vous verrez que l'utilisation est très simple :

<!-- HTML -->
<button id="btn">Essayez-moi !</button>
<canvas id="confetti-canvas"></canvas>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<script type="text/javascript">
  const btn = document.querySelector('#btn');
  const canvas = document.querySelector('#confetti-canvas');
  function onButtonClick(){
    var myConfetti = confetti.create(canvas, {
      resize: true,
      useWorker: true
    });
    myConfetti({
      particleCount: 100,
      spread: 160
    });
  }
  btn.addEventListener('click', onButtonClick);
</script>

<!-- CSS -->
<style>
#confetti-canvas {
  position: fixed; 
  z-index: 999; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  pointer-events: none;
}
</style>

Et voilà, vous pouvez désormais déclencher des confettis n'importe quand !

À noter que si vous utilisez React, il existe également un paquet appelé react-confetti, qui offre une implémentation différente de l'animation, et permet même de créer des formes de confetti personnalisées !