From 490b47e1de46f30d12035cee4d139b753f85d00e Mon Sep 17 00:00:00 2001 From: kom-senapati Date: Sun, 11 Feb 2024 16:57:20 +0530 Subject: [PATCH] feat: add raindrop ripple background --- .../Raindrop-Ripple-Background/index.html | 16 ++++++++ .../Raindrop-Ripple-Background/script.js | 28 +++++++++++++ .../Raindrop-Ripple-Background/style.css | 39 +++++++++++++++++++ assets/html_files/backgrounds.html | 15 +++++++ 4 files changed, 98 insertions(+) create mode 100644 Components/Backgrounds/Raindrop-Ripple-Background/index.html create mode 100644 Components/Backgrounds/Raindrop-Ripple-Background/script.js create mode 100644 Components/Backgrounds/Raindrop-Ripple-Background/style.css diff --git a/Components/Backgrounds/Raindrop-Ripple-Background/index.html b/Components/Backgrounds/Raindrop-Ripple-Background/index.html new file mode 100644 index 00000000..0c938261 --- /dev/null +++ b/Components/Backgrounds/Raindrop-Ripple-Background/index.html @@ -0,0 +1,16 @@ + + + + + + + Raindrop Ripple Effect + + + + +
+ + + + \ No newline at end of file diff --git a/Components/Backgrounds/Raindrop-Ripple-Background/script.js b/Components/Backgrounds/Raindrop-Ripple-Background/script.js new file mode 100644 index 00000000..3091d933 --- /dev/null +++ b/Components/Backgrounds/Raindrop-Ripple-Background/script.js @@ -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(); + }); + } +}); diff --git a/Components/Backgrounds/Raindrop-Ripple-Background/style.css b/Components/Backgrounds/Raindrop-Ripple-Background/style.css new file mode 100644 index 00000000..9411cd57 --- /dev/null +++ b/Components/Backgrounds/Raindrop-Ripple-Background/style.css @@ -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; + } +} diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html index 19546620..4cc769d5 100644 --- a/assets/html_files/backgrounds.html +++ b/assets/html_files/backgrounds.html @@ -417,6 +417,21 @@

Mouse Responsive Web Background

+
+

Raindrop Ripple Background

+
+ + + +
+
+ + + +
+