Java-Scripts.net

Rain Animation

A simple weather effect. This script spawns 'raindrops' at random horizontal positions and animates them falling vertically to create a storm atmosphere.

Stormy Weather

Copy the Script

<style>
.drop {
    position: fixed; width: 2px; height: 15px;
    background: #00f; top: -20px;
    animation: rain 0.5s linear infinite;
}
@keyframes rain { to { transform: translateY(100vh); } }
</style>

<script>
function makeRain() {
    var drop = document.createElement("div");
    drop.className = "drop";
    drop.style.left = Math.random() * 100 + "vw";
    drop.style.animationDuration = (Math.random() * 0.5 + 0.3) + "s";
    document.body.appendChild(drop);
    setTimeout(() => drop.remove(), 1000);
}
setInterval(makeRain, 20); // Frequency
</script>

Frequently Asked Questions

This specific version uses DOM elements (`divs`) and CSS `keyframes` for simplicity. For extremely heavy rain with thousands of drops, HTML5 Canvas would be more performant.

Yes. Change the `background` property of the raindrop class to blue, purple, or even 'Matrix green' for a digital code effect.

Yes, but be mindful of the number of drops. Too many animated elements can drain battery life on mobile devices.