Webleb - UI Elements - Realastic Rain Fall

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Realistic Rainfall Animation</title>
    <style>
        body {
            background-color: black;
            overflow: hidden;
        }
        
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="rainfall"></canvas>

// Set canvas size to match window size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Create an array to store the raindrops
        const raindrops = [];

// Function to create a new raindrop
        function createRaindrop() {
            const x = Math.random() * canvas.width;
            const y = -5;
            const speed = Math.random() * 5 + 2;
            const length = Math.random() * 20 + 10;

raindrops.push({ x, y, speed, length });
        }

// Function to update the raindrops' positions
        function updateRaindrops() {
            for (let i = 0; i < raindrops.length; i++) {
                const raindrop = raindrops[i];

raindrop.y += raindrop.speed;

if (raindrop.y > canvas.height) {
                    raindrops.splice(i, 1);
                    i--;
                }
            }
        }

// Function to draw the raindrops
        function drawRaindrops() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle = 'white';
            ctx.lineWidth = 2;

for (let i = 0; i < raindrops.length; i++) {
                const raindrop = raindrops[i];

ctx.beginPath();
                ctx.moveTo(raindrop.x, raindrop.y);
                ctx.lineTo(raindrop.x, raindrop.y + raindrop.length);
                ctx.stroke();
            }
        }

// Function to animate the raindrops
        function animate() {
            createRaindrop();
            updateRaindrops();
            drawRaindrops();

requestAnimationFrame(animate);
        }

// Start the animation
        animate();
    </script>
</body>
</html>

Realastic Rain Fall

Recommended

Feather falling

rainbow button

HTML

CSS

JS

Recommended

Feather falling

rainbow button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS