Easter egg

21 vues

3 min

Comment déclencher des confettis en fin d'article dans Webflow ?

Apprenez à déclencher des confettis quand un visiteur termine de lire votre article Webflow avec canvas-confetti.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment déclencher des confettis quand un visiteur termine de lire votre article Webflow.

Exemple

Testez les deux modes de déclenchement

Fin d'article

Feu d'artifice depuis les deux coins

Jalons progressifs

Confettis légers à 50%, complets à 100%

Paramètre	Valeur	Description
Déclencheur	scroll >= total - 100px	100px avant la fin de la page
fired	Boolean	Empêche les confettis de se répéter
Origine	x: 0 et x: 1	Feu d'artifice depuis les deux coins

1. Chargez canvas-confetti dans le head

// Dans Page Settings > Head :
// <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1/dist/confetti.browser.min.js"></script>

2. Ajoutez un message de fin (optionnel)

Créez un Div avec l'ID article-finished en display none à la fin de votre article. Il sera affiché quand le lecteur atteint la fin. Mettez-y votre CTA de fin d'article.

3. Ajoutez le script dans Footer code

(function() {
  if (typeof confetti !== 'function') return;
  var fired = false;

  window.addEventListener('scroll', function() {
    if (fired) return;
    var scrolled = window.scrollY + window.innerHeight;
    var total = document.documentElement.scrollHeight;
    if (scrolled >= total - 100) {
      fired = true;
      // Feu d'artifice depuis les deux coins
      confetti({ particleCount: 80, angle: 60, spread: 55, origin: { x: 0, y: 0.8 } });
      confetti({ particleCount: 80, angle: 120, spread: 55, origin: { x: 1, y: 0.8 } });
      // Message de félicitations
      var el = document.getElementById('article-finished');
      if (el) el.style.display = 'block';
    }
  }, { passive: true });
})();

4. Variante : étoiles progressives

Pour un effet plus subtil aux jalons 50% et 100% :

var milestones = { 50: false, 100: false };
window.addEventListener('scroll', function() {
  var pct = Math.round((window.scrollY + window.innerHeight) / document.documentElement.scrollHeight * 100);
  if (pct >= 50 && !milestones[50]) {
    milestones[50] = true;
    confetti({ particleCount: 30, spread: 50, origin: { y: 0.6 } });
  }
  if (pct >= 100 && !milestones[100]) {
    milestones[100] = true;
    confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } });
  }
}, { passive: true });

bon à savoir

Le seuil de total - 100px (100px avant la fin de la page) évite que les confettis se déclenchent uniquement quand l'utilisateur scrolle jusqu'au tout dernier pixel, ce qui n'arrive presque jamais. Ajustez ce seuil selon la longueur de votre footer : si votre footer fait 400px, montez le seuil à total - 500px pour déclencher à la fin du contenu réel.

Conclusion

Les confettis de fin d'article créent un moment de célébration et de mémorabilité. Cas d'usage :

Articles longs et denses récompensant la lecture complète
Tutoriels avec completion reward
Landing pages avec scroll storytelling

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

4.9/5 • 97 avis

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

on en discute