Comment ajouter de la neige ou des confettis en background 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.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.










.avif)




