Added Bubbles Floating Background-2 (#1499)

avnisinngh · web-flow · commit ac1e06eb9447 · 2025-03-01T22:43:02.000+05:30
diff --git a/Components/Backgrounds/Bubbles-Floating-Background-2/index.html b/Components/Backgrounds/Bubbles-Floating-Background-2/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Bubbles Floating Background-2</title>
+</head>
+<body>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Components/Backgrounds/Bubbles-Floating-Background-2/script.js b/Components/Backgrounds/Bubbles-Floating-Background-2/script.js
@@ -0,0 +1,17 @@
+function createBubble() {
+    const bubble = document.createElement("div");
+    bubble.classList.add("bubble");
+    document.body.appendChild(bubble);
+
+    const size = Math.random() * 30 + 10 + "px";
+    bubble.style.width = size;
+    bubble.style.height = size;
+    bubble.style.left = Math.random() * 100 + "vw";
+    bubble.style.animationDuration = Math.random() * 5 + 3 + "s";
+
+    setTimeout(() => {
+        bubble.remove();
+    }, 8000);
+}
+
+setInterval(createBubble, 500);
diff --git a/Components/Backgrounds/Bubbles-Floating-Background-2/style.css b/Components/Backgrounds/Bubbles-Floating-Background-2/style.css
@@ -0,0 +1,47 @@
+body {
+    margin: 0;
+    height: 100vh;
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    background-size: 400% 400%;
+    animation: gradientBG 10s ease infinite;
+    background: linear-gradient(-45deg, rgba(251, 194, 235, 0.6), rgba(166, 193, 238, 0.6), rgba(251, 194, 235, 0.6), rgba(166, 193, 238, 0.6));
+}
+
+@keyframes gradientBG {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.bubble {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: rgb(255, 255, 255); /* Increased opacity */
+    border-radius: 50%;
+    opacity: 1; /* Set full opacity */
+    animation: floatUp linear infinite;
+}
+
+@keyframes floatUp {
+    0% {
+        transform: translateY(100vh) scale(1);
+        opacity: 1; /* Start with full opacity */
+    }
+
+    100% {
+        transform: translateY(-10vh) scale(1.3);
+        opacity: 0.3; /* Reduced opacity slightly */
+    }
+}
diff --git a/Components/Backgrounds/Bubbles-Floating-Background/index.html b/Components/Backgrounds/Bubbles-Floating-Background/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <title>Bubble Float Background</title>
+    <title>Bubbles Floating Background</title>
 </head>
 
 <body>
diff --git a/Components/Backgrounds/Bubbles-Floating-Background/style.css b/Components/Backgrounds/Bubbles-Floating-Background/style.css
diff --git a/assets/json_files/backgrounds.json b/assets/json_files/backgrounds.json
@@ -40,9 +40,14 @@
         "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Aurora-Borealis-Background"
     },
     {
-        "title": "Bubble Float Background",
-        "previewLink": "../../Components/Backgrounds/Bubble-Float-Background/index.html",
-        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Bubble-Float-Background"
+        "title": "Bubbles Floating Background",
+        "previewLink": "../../Components/Backgrounds/Bubbles-Floating-Background/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Bubbles-Floating-Background"
+    },
+    {
+        "title": "Bubbles Floating Background-2",
+        "previewLink": "../../Components/Backgrounds/Bubbles-Floating-Background-2/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Bubbles-Floating-Background-2"
     },
     {
         "title": "Coalesce Animation Background",
