Aller au contenu

Easter egg3 min lecture

Comment ajouter de la neige ou des confettis dans Webflow ?

Apprenez à ajouter un effet de neige ou confettis en continu en background dans Webflow avec JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un effet de neige ou confettis en continu en background dans Webflow.

ParamètreValeurDescription
COUNT80Nombre de flocons
CHAR❄Caractère (❄, ⭐, 🎉, ✨...)
SIZE_MIN / SIZE_MAX10 / 24Taille min/max en px
SPEED_MIN / SPEED_MAX1 / 3Vitesse de chute

Le script

Collez ce script dans le champ Footer code. Changez CHAR pour adapter l'effet à votre saison.

(function() {
  var COUNT = 80, CHAR = '❄';
  var SIZE_MIN = 10, SIZE_MAX = 24, SPEED_MIN = 1, SPEED_MAX = 3;
  var styleEl = document.createElement('style');
  styleEl.textContent = '@keyframes snowfall { from { transform: translateY(-50px) rotate(0deg); } to { transform: translateY(110vh) rotate(360deg); } }';
  document.head.appendChild(styleEl);
  for (var i = 0; i < COUNT; i++) {
    (function() {
      var el = document.createElement('div');
      var size = SIZE_MIN + Math.random() * (SIZE_MAX - SIZE_MIN);
      var left = Math.random() * 100;
      var delay = Math.random() * 10;
      var duration = SPEED_MIN + Math.random() * (SPEED_MAX - SPEED_MIN) + 5;
      el.textContent = CHAR;
      el.style.cssText = 'position:fixed;top:-50px;left:'+left+'%;font-size:'+size+'px;pointer-events:none;z-index:9999;'
        + 'animation:snowfall '+duration+'s '+delay+'s linear infinite;opacity:0.8;';
      document.body.appendChild(el);
    })();
  }
})();

Conclusion

Un effet saisonnier qui rafraîchit visuellement un site à des moments clés.

Publié le 19 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!