Ajouter

Lorem ipsum

Lorem ipsum

Easter egg

44 vues

3 min

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ètreValeurDescription
COUNT80Nombre de flocons
CHARCaractè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);
})();
}
})();

bon à savoir

Changez CHAR en '🎉' pour des confettis, '⭐' pour des étoiles, '🍂' pour des feuilles d'automne. Conditionnez selon la date : if (new Date().getMonth() === 11) { /* décembre seulement */ } pour un effet saisonnier automatique.

Conclusion

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

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

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

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

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...