Learn how to add a continuous snow or confetti effect in the background in Webflow with JavaScript.
In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to add a continuous snow or confetti effect in the background in Webflow.
| Parameter | Value | Description |
|---|
| COUNT | 80 | Number of flakes |
| CHAR | ❄ | Character (❄, ⭐, 🎉, ✨...) |
| SIZE_MIN / SIZE_MAX | 10 / 24 | Min/max size in px |
| SPEED_MIN / SPEED_MAX | 1 / 3 | Fall speed |
The script
Paste this script into the Footer code field. Change CHAR to match the effect to the season.
(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);
})();
}
})();
good to know
Change CHAR to '🎉' for confetti, '⭐' for stars, or '🍂' for autumn leaves. Add a condition based on the date: if (new Date().getMonth() === 11) { /* December only */ } for an automatic seasonal effect.
Conclusion
A seasonal effect that gives a website a visual refresh at key moments.