रियलिस्टिक रेन फॉल

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

25 November 2025

CSS फॉलिंग लोडिंग एनिमेशन स्निपेट

4 September 2023

<!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>

रियलिस्टिक रेन फॉल

अनुशंसित

ब्रेनरोट चुराओ

CSS फॉलिंग लोडिंग एनिमेशन स्निपेट

फॉलोवर बॉट यूआई

HTML

CSS

JS

अनुशंसित

ब्रेनरोट चुराओ

CSS फॉलिंग लोडिंग एनिमेशन स्निपेट

फॉलोवर बॉट यूआई

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS