Comment obtenir un effet confetti avec un emoji quand je clique sur un bouton?

Script
1

Je travaille sur une campagne marketing pour un client qui veut créer une expérience utilisateur ludique sur son site web. L’idée est d’ajouter un petit plus à la fin de leur processus d’achat. En gros, quand un client clique sur le bouton « Acheter maintenant », nous voulons avoir une sorte d’effet de confetti d’emoji fête pour célébrer leur achat. Cela ajoute une touche d’excitation et rend l’expérience d’achat plus mémorable. Donc, comment puis-je obtenir cet effet de confetti avec un emoji quand je clique sur un bouton ?

2 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confetti Effect</title>
<style>
#confetti-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 999999;
}

.confetti {
  position: absolute;
  will-change: transform;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}
</style>
</head>
<body>

<button class="button" id="confettiButton">Acheter maintenant</button>
<div id="confetti-wrapper"></div>

<script>
const confettiWrapper = document.getElementById('confettiWrapper');

function createConfetti() {
  const emojis = ['🎉', '🎊', '✨']; // Add more emojis if needed
  const confettiCount = 100;
  const confettiWrapper = document.getElementById('confetti-wrapper');

  for (let i = 0; i < confettiCount; i++) {
    const confetti = document.createElement('div');
    confetti.innerText = emojis[Math.floor(Math.random() * emojis.length)];
    confetti.className = 'confetti';
    confetti.style.left = `${Math.random() * 100}%`;
    confetti.style.animation = `confetti-fall ${Math.random() * 3 + 2}s linear`;
    confettiWrapper.appendChild(confetti);
  }

  setTimeout(() => {
    confettiWrapper.innerHTML = '';
  }, 3000);
}

document.getElementById('confettiButton').addEventListener('click', createConfetti);

</script>
<style>
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(800px) rotate(720deg); opacity: 0; }
}
</style>
</body>
</html>
3

  1. Confetti.js: C’est une bibliothèque JavaScript qui permet de générer de beaux effets de confettis. Elle est gratuite et open source. Vous pouvez la trouver ici: GitHub - Agezao/confetti-js: Easily Generate random confetti for your above-the-fold content

  2. Particle.js: C’est une autre bibliothèque JavaScript qui permet de créer des effets de particules interactifs. Elle est également gratuite et open source. Vous pouvez la trouver ici: particles.js - A lightweight JavaScript library for creating particles

  3. GreenSock (GSAP): C’est une bibliothèque JavaScript pour des animations high-performance. Elle a une version gratuite avec des fonctionnalités de base et une version payante à partir de $99/an pour des fonctionnalités avancées. Vous pouvez la trouver ici: Homepage | GSAP

  4. Anime.js: C’est une bibliothèque JavaScript légère pour créer des animations. Elle est gratuite et open source. Vous pouvez la trouver ici: http://animejs.com

  5. Mo.js: C’est une bibliothèque JavaScript pour créer des animations graphiques. Elle est gratuite et open source. Vous pouvez la trouver ici: http://mojs.io/

  6. Three.js: C’est une bibliothèque JavaScript pour créer des animations 3D. Elle est gratuite et open source. Vous pouvez la trouver ici: https://threejs.org/

  7. Babylon.js: C’est une autre bibliothèque JavaScript pour créer des animations 3D. Elle est également gratuite et open source. Vous pouvez la trouver ici: https://www.babylonjs.com/

  8. Velocity.js: C’est une bibliothèque JavaScript pour créer des animations rapides et performantes. Elle est gratuite et open source. Vous pouvez la trouver ici: http://velocityjs.org/

  9. Popmotion.js: C’est une bibliothèque JavaScript pour créer des animations et des interactions. Elle est gratuite et open source. Vous pouvez la trouver ici: https://popmotion.io/

  10. Bodymovin: C’est une extension After Effects qui permet d’exporter des animations en JSON pour les utiliser dans le web. Elle est gratuite et open source. Vous pouvez la trouver ici: Bodymovin - Lottie - aescripts + aeplugins - aescripts.com