Adding a snowfall animation to your website is a delightful way to give it a touch of seasonal charm. The following JavaScript example demonstrates how to simulate gently falling snowflakes using only plain HTML, CSS, and JavaScript with no external libraries required.
The script dynamically creates small white circles that drift downward across the screen with a natural, swaying motion. You can easily control the number of snowflakes, their speed, size, and movement patterns for a subtle or festive effect. Once you’ve placed this code into your page, it immediately begins animating snow across the viewport.
Snowfall JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowfall Effect</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrollbars if needed */
background-color: #000; /* Dark background for contrast, change as needed */
}
.snowflake {
position: fixed;
background-color: #fff;
border-radius: 50%;
pointer-events: none; /* So it doesn't interfere with interactions */
z-index: 999999; /* High z-index to ensure it's on top of other elements */
}
</style>
</head>
<body>
<script>
// Snowfall JavaScript
const snowflakes = [];
const maxSnowflakes = 100; // Adjust for more/less snow
const flakeCreationInterval = 100; // ms between creating new flakes
function random(min, max) {
return Math.random() * (max - min) + min;
}
function createSnowflake() {
const flake = document.createElement('div');
flake.className = 'snowflake';
const size = random(2, 8); // Random size between 2-8px
flake.style.width = `${size}px`;
flake.style.height = `${size}px`;
flake.style.opacity = random(0.5, 1); // Random opacity
flake.x = random(0, window.innerWidth); // Start x position
flake.y = -size; // Start above the screen
flake.speed = random(1, 3); // Fall speed
flake.amplitude = random(10, 30); // Horizontal sway amplitude
flake.phase = random(0, Math.PI * 2); // Random phase for sine wave
flake.style.left = `${flake.x}px`;
flake.style.top = `${flake.y}px`;
document.body.appendChild(flake);
snowflakes.push(flake);
}
function updateSnowflakes() {
snowflakes.forEach((flake, index) => {
flake.y += flake.speed;
flake.x += Math.sin(flake.y / 20 + flake.phase) * (flake.amplitude / 10); // Sway effect
flake.style.top = `${flake.y}px`;
flake.style.left = `${flake.x}px`;
if (flake.y > window.innerHeight) {
document.body.removeChild(flake);
snowflakes.splice(index, 1);
}
});
requestAnimationFrame(updateSnowflakes);
}
// Start creating snowflakes
setInterval(createSnowflake, flakeCreationInterval);
// Limit the number of snowflakes
setInterval(() => {
while (snowflakes.length > maxSnowflakes) {
const flake = snowflakes.shift();
if (flake) {
document.body.removeChild(flake);
}
}
}, 1000);
// Start the animation loop
updateSnowflakes();
// Handle window resize to adjust x positions if needed
window.addEventListener('resize', () => {
snowflakes.forEach(flake => {
if (flake.x > window.innerWidth) {
flake.x = random(0, window.innerWidth);
}
});
});
</script>
</body>
</html>How the Snowfall Script Works
The core of this animation lies in three elements: snowflake creation, motion updates, and cleanup.
1. Creating Snowflakes
The script defines a createSnowflake() function that generates small <div> elements styled as white circles. Each flake is assigned random properties:
- Size: Between 2 and 8 pixels in diameter, creating depth and variation.
- Opacity: Between 0.5 and 1, adding a translucent quality to mimic light reflection.
- Position: The flake’s x coordinate is randomly chosen across the screen width, and it begins just above the top edge (y = -size).
- Speed and Motion: Each flake falls at a random speed between 1 and 3 pixels per frame, with a horizontal oscillation determined by a sine wave function for a natural drift.
A JavaScript interval continuously adds new flakes every 100 milliseconds, while the total number of active flakes is capped at 100 to prevent performance issues.
2. Animating the Snow
The animation loop is driven by requestAnimationFrame(), a method optimized for smooth animations in modern browsers. The updateSnowflakes() function iterates through each flake, updating its vertical (y) and horizontal (x) positions. The horizontal movement uses a sine function:
flake.x += Math.sin(flake.y / 20 + flake.phase) * (flake.amplitude / 10);This creates a gentle side-to-side swaying motion as each flake descends, similar to how snow drifts in the air.
3. Cleaning Up Off-Screen Snowflakes
To keep the DOM lightweight and performance high, flakes that move beyond the bottom of the viewport are removed from both the page and the snowflake array. A separate timed loop also ensures that the number of flakes never exceeds the defined maximum by trimming excess elements.
4. Responsive Adjustments
The window resize event listener checks if any flakes drift beyond the new window width after resizing. If they do, it repositions them within the visible area, ensuring the animation remains consistent on any screen size.
Customizing the Effect
Since this implementation uses simple DOM elements and native JavaScript, it runs smoothly on most modern browsers without dependencies. However, if you plan to use it on complex or image-heavy pages, you can lower the number of flakes or decrease creation frequency to maintain high frame rates.
You can easily modify the experience:
- Increase maxSnowflakes for heavier snowfall or reduce it for a subtler effect.
- Adjust flakeCreationInterval to control how frequently new flakes appear.
- Change the background color in the CSS to fit your site’s theme.
- Modify the flake size or opacity range for different textures of snow—from light flurries to thick flakes.
This script is a fun, lightweight way to celebrate the winter season or add visual interest to your site’s homepage. By combining randomization, smooth animation loops, and subtle visual variations, it achieves a surprisingly natural snowfall effect. With just a few lines of code, you can turn any webpage into a serene, snow-dusted landscape.
Related Martech Zone Content
