Skip to content

Commit 8e20b8d

Browse files
Rakesh9100Rakesh9100
authored
Added changes
1 parent 4b750db commit 8e20b8d

File tree

7 files changed

+61
-48
lines changed

7 files changed

+61
-48
lines changed

‎Components/Backgrounds/Bubbles-Floating-Background-2/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Bubbles Floating Background-2</title>
8+
</head>
9+
<body>
10+
<script src="script.js"></script>
11+
</body>
12+
</html>

‎Components/Backgrounds/Bubbles-Floating-Background-2/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
function createBubble() {
2+
const bubble = document.createElement("div");
3+
bubble.classList.add("bubble");
4+
document.body.appendChild(bubble);
5+
6+
const size = Math.random() * 30 + 10 + "px";
7+
bubble.style.width = size;
8+
bubble.style.height = size;
9+
bubble.style.left = Math.random() * 100 + "vw";
10+
bubble.style.animationDuration = Math.random() * 5 + 3 + "s";
11+
12+
setTimeout(() => {
13+
bubble.remove();
14+
}, 8000);
15+
}
16+
17+
setInterval(createBubble, 500);

‎Components/Backgrounds/Soft-Floating-Bubbles-background/style.css‎ renamed to ‎Components/Backgrounds/Bubbles-Floating-Background-2/style.css‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,26 @@ body {
22
margin: 0;
33
height: 100vh;
44
display: flex;
5+
overflow: hidden;
56
align-items: center;
67
justify-content: center;
7-
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));
8-
98
background-size: 400% 400%;
109
animation: gradientBG 10s ease infinite;
11-
overflow: hidden;
10+
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));
1211
}
1312

1413
@keyframes gradientBG {
15-
0% { background-position: 0% 50%; }
16-
50% { background-position: 100% 50%; }
17-
100% { background-position: 0% 50%; }
14+
0% {
15+
background-position: 0% 50%;
16+
}
17+
18+
50% {
19+
background-position: 100% 50%;
20+
}
21+
22+
100% {
23+
background-position: 0% 50%;
24+
}
1825
}
1926

2027
.bubble {
@@ -28,6 +35,13 @@ body {
2835
}
2936

3037
@keyframes floatUp {
31-
0% { transform: translateY(100vh) scale(1); opacity: 1; } /* Start with full opacity */
32-
100% { transform: translateY(-10vh) scale(1.3); opacity: 0.3; } /* Reduced opacity slightly */
33-
}
38+
0% {
39+
transform: translateY(100vh) scale(1);
40+
opacity: 1; /* Start with full opacity */
41+
}
42+
43+
100% {
44+
transform: translateY(-10vh) scale(1.3);
45+
opacity: 0.3; /* Reduced opacity slightly */
46+
}
47+
}

‎Components/Backgrounds/Bubble-Float-Background/index.html‎ renamed to ‎Components/Backgrounds/Bubbles-Floating-Background/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="style.css">
8-
<title>Bubble Float Background</title>
8+
<title>Bubbles Floating Background</title>
99
</head>
1010

1111
<body>

‎Components/Backgrounds/Bubble-Float-Background/style.css‎ renamed to ‎Components/Backgrounds/Bubbles-Floating-Background/style.css‎

File renamed without changes.

‎Components/Backgrounds/Soft-Floating-Bubbles-background/index.html‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎assets/json_files/backgrounds.json‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,14 @@
3535
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Aurora-Borealis-Background"
3636
},
3737
{
38-
"title": "Bubble Float Background",
39-
"previewLink": "../../Components/Backgrounds/Bubble-Float-Background/index.html",
40-
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Bubble-Float-Background"
38+
"title": "Bubbles Floating Background",
39+
"previewLink": "../../Components/Backgrounds/Bubbles-Floating-Background/index.html",
40+
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Bubbles-Floating-Background"
41+
},
42+
{
43+
"title": "Bubbles Floating Background-2",
44+
"previewLink": "../../Components/Backgrounds/Bubbles-Floating-Background-2/index.html",
45+
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Bubbles-Floating-Background-2"
4146
},
4247
{
4348
"title": "Coalesce Animation Background",
@@ -204,12 +209,6 @@
204209
"previewLink": "../../Components/Backgrounds/Squares-Animation-Background/index.html",
205210
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Squares-Animation-Background"
206211
},
207-
{
208-
"title": "Soft Floating Bubbles Background",
209-
"previewLink": "../../Components/Backgrounds/Soft-Floating-Bubbles-background/index.html",
210-
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Soft-Floating-Bubbles-Background"
211-
212-
},
213212
{
214213
"title": "Swirl Animation Background",
215214
"previewLink": "../../Components/Backgrounds/Swirl-Animation-Background/index.html",

0 commit comments

Comments
 (0)