Realastic Rain Fall code free for your website
index.html
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Realistic Rainfall Animation</title>5
<style>6
body {7
background-color: black;8
overflow: hidden;9
}10
11
canvas {12
position: absolute;13
top: 0;14
left: 0;15
}16
</style>17
</head>18
<body>19
<canvas id="rainfall"></canvas>20
21
<script>22
const canvas = document.getElementById('rainfall');23
const ctx = canvas.getContext('2d');24
25
// Set canvas size to match window size26
canvas.width = window.innerWidth;27
canvas.height = window.innerHeight;28
29
// Create an array to store the raindrops30
const raindrops = [];31
32
// Function to create a new raindrop33
function createRaindrop() {34
const x = Math.random() * canvas.width;35
const y = -5;36
const speed = Math.random() * 5 + 2;37
const length = Math.random() * 20 + 10;38
39
raindrops.push({ x, y, speed, length });40
}41
42
// Function to update the raindrops' positions43
function updateRaindrops() {44
for (let i = 0; i < raindrops.length; i++) {45
const raindrop = raindrops[i];46
47
raindrop.y += raindrop.speed;48
49
if (raindrop.y > canvas.height) {50
raindrops.splice(i, 1);51
i--;52
}53
}54
}55
56
// Function to draw the raindrops57
function drawRaindrops() {58
ctx.clearRect(0, 0, canvas.width, canvas.height);59
60
ctx.strokeStyle = 'white';61
ctx.lineWidth = 2;62
63
for (let i = 0; i < raindrops.length; i++) {64
const raindrop = raindrops[i];65
66
ctx.beginPath();67
ctx.moveTo(raindrop.x, raindrop.y);68
ctx.lineTo(raindrop.x, raindrop.y + raindrop.length);69
ctx.stroke();70
}71
}72
73
// Function to animate the raindrops74
function animate() {75
createRaindrop();76
updateRaindrops();77
drawRaindrops();78
79
requestAnimationFrame(animate);80
}81
82
// Start the animation83
animate();84
</script>85
</body>86
</html>87
styles.css
1
/* Replace with your CSS Code 2
(Leave empty if not needed) */ 3
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
