Skip to content

Commit

Permalink
feat: add raindrop ripple background
Browse files Browse the repository at this point in the history
  • Loading branch information
kom-senapati committed Feb 11, 2024
1 parent 5772286 commit 490b47e
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 0 deletions.
16 changes: 16 additions & 0 deletions Components/Backgrounds/Raindrop-Ripple-Background/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raindrop Ripple Effect</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="background"></div>
<script src="script.js"></script>
</body>

</html>
28 changes: 28 additions & 0 deletions Components/Backgrounds/Raindrop-Ripple-Background/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
document.addEventListener('DOMContentLoaded', function () {
const numDrops = 50;
const bg = document.getElementById('background');

for (let i = 0; i < numDrops; i++) {
const drop = document.createElement('div');
drop.className = 'raindrop';
bg.appendChild(drop);

const size = Math.random() * 10 + 2; // Random size between 2 and 12 px
const duration = Math.random() * 2 + 1; // Random duration between 1 and 3 seconds
const delay = Math.random() * 5; // Random delay between 0 and 5 seconds
const x = Math.random() * window.innerWidth; // Random horizontal position
const y = -Math.random() * window.innerHeight; // Start above viewport

// Applying drop properties
drop.style.width = `${size}px`;
drop.style.height = `${size}px`;
drop.style.left = `${x}px`;
drop.style.animationDuration = `${duration}s`;
drop.style.animationDelay = `${delay}s`;

// Removing drop after animation
drop.addEventListener('animationend', function () {
drop.remove();
});
}
});
39 changes: 39 additions & 0 deletions Components/Backgrounds/Raindrop-Ripple-Background/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2c3e50;
pointer-events: none;
}

.raindrop {
position: absolute;
background-color: #77aaff;
border-radius: 50%;
pointer-events: none;
animation: fall linear infinite;
}

@keyframes fall {
0% {
transform: translateY(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(calc(100vh + 100px));
opacity: 0;
}
}
15 changes: 15 additions & 0 deletions assets/html_files/backgrounds.html
Original file line number Diff line number Diff line change
Expand Up @@ -417,6 +417,21 @@ <h1>Mouse Responsive Web Background</h1>
</a>
</div>
</div>
<div class="box">
<h1>Raindrop Ripple Background</h1>
<div class="preview">
<a href="../../Components/Backgrounds/Raindrop-Ripple-Background/index.html" title="Live Preview"
target="_blank">
<img src="../images/link.png">
</a>
</div>
<div class="source">
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Raindrop-Ripple-Background"
title="Source Code" target="_blank">
<img src="../images/github.png">
</a>
</div>
</div>
</div>
</section>

Expand Down

0 comments on commit 490b47e

Please sign in to comment.