Java-Scripts.net

Falling Snow Animation

Bring winter to the web. This script dynamically creates snowflake elements and animates them falling from the top of the container to the bottom.

Let it Snow!

Watch the particles fall in the background.

Copy the Script

<style>
.snowflake {
    position: fixed; top: -10px;
    color: #fff; user-select: none;
    pointer-events: none; 
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes fall { to { transform: translateY(100vh); } }
</style>

<script>
function createSnow() {
    var flake = document.createElement("div");
    flake.innerHTML = "❄"; // Snowflake symbol
    flake.className = "snowflake";
    flake.style.left = Math.random() * 100 + "vw";
    flake.style.fontSize = (Math.random() * 10 + 10) + "px";
    flake.style.animationDuration = (Math.random() * 3 + 2) + "s";
    document.body.appendChild(flake);
    
    // Cleanup
    setTimeout(() => { flake.remove(); }, 5000);
}
setInterval(createSnow, 100);
</script>

Frequently Asked Questions

It can if you create too many flakes. We recommend limiting the particle count (e.g., 50 flakes) to ensure smooth performance on mobile devices.

Yes. The script uses the asterisk (*) or a unicode dot by default, but you can replace it with an image or SVG for realistic snow.

Yes. The flakes are positioned absolutely with `pointer-events: none`, meaning they drift over your text but don't interfere with clicking links.