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ètre | Valeur | Description |
|---|---|---|
| COUNT | 80 | Nombre de flocons |
| CHAR | ❄ | Caractère (❄, ⭐, 🎉, ✨...) |
| SIZE_MIN / SIZE_MAX | 10 / 24 | Taille min/max en px |
| SPEED_MIN / SPEED_MAX | 1 / 3 | Vitesse 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.


