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 :
//

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

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

Exemple

1. Chargez canvas-confetti dans le head

2. Ajoutez un message de fin (optionnel)

3. Ajoutez le script dans Footer code

4. Variante : étoiles progressives

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires