Skip to content

Commit fde1bb7

Browse files
author
tenzing
committed
added mt art the project
1 parent 38c501e commit fde1bb7

5 files changed

Lines changed: 111 additions & 0 deletions

File tree

‎Art/tenzing-animation/balls.png‎

7.27 KB
Loading

‎Art/tenzing-animation/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
<title>Bouncy Balls</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="scene">
11+
<div class="ball-wrap">
12+
<div class="ball purple"></div>
13+
<div class="shadow"></div>
14+
</div>
15+
<div class="ball-wrap">
16+
<div class="ball green"></div>
17+
<div class="shadow"></div>
18+
</div>
19+
<div class="ball-wrap">
20+
<div class="ball orange"></div>
21+
<div class="shadow"></div>
22+
</div>
23+
<div class="ball-wrap">
24+
<div class="ball pink"></div>
25+
<div class="shadow"></div>
26+
</div>
27+
<div class="ball-wrap">
28+
<div class="ball amber"></div>
29+
<div class="shadow"></div>
30+
</div>
31+
</div>
32+
</body>
33+
</html>

‎Art/tenzing-animation/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Bouncing Balls",
3+
"githubHandle": "namte24"
4+
}

‎Art/tenzing-animation/styles.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
* { margin: 0; padding: 0; box-sizing: border-box; }
2+
3+
body {
4+
min-height: 100vh;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
background: #f5f3ee;
9+
}
10+
11+
.scene {
12+
display: flex;
13+
align-items: flex-end;
14+
gap: 28px;
15+
height: 220px;
16+
}
17+
18+
.ball-wrap {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
gap: 4px;
23+
}
24+
25+
.ball {
26+
width: 52px;
27+
height: 52px;
28+
border-radius: 50%;
29+
animation: bounce 0.7s cubic-bezier(0.36, 0, 0.66, -0.56) infinite alternate;
30+
}
31+
32+
.ball-wrap:nth-child(1) .ball { animation-delay: 0s; }
33+
.ball-wrap:nth-child(2) .ball { animation-delay: 0.12s; }
34+
.ball-wrap:nth-child(3) .ball { animation-delay: 0.24s; }
35+
.ball-wrap:nth-child(4) .ball { animation-delay: 0.36s; }
36+
.ball-wrap:nth-child(5) .ball { animation-delay: 0.48s; }
37+
38+
.ball-wrap:nth-child(1) .shadow { animation-delay: 0s; }
39+
.ball-wrap:nth-child(2) .shadow { animation-delay: 0.12s; }
40+
.ball-wrap:nth-child(3) .shadow { animation-delay: 0.24s; }
41+
.ball-wrap:nth-child(4) .shadow { animation-delay: 0.36s; }
42+
.ball-wrap:nth-child(5) .shadow { animation-delay: 0.48s; }
43+
44+
.ball.purple { background: #7F77DD; }
45+
.ball.green { background: #1D9E75; }
46+
.ball.orange { background: #D85A30; }
47+
.ball.pink { background: #D4537E; }
48+
.ball.amber { background: #BA7517; }
49+
50+
.shadow {
51+
width: 40px;
52+
height: 8px;
53+
border-radius: 50%;
54+
background: rgba(0, 0, 0, 0.12);
55+
animation: shadow 0.7s ease-in-out infinite alternate;
56+
}
57+
58+
@keyframes bounce {
59+
0% { transform: translateY(0); }
60+
100% { transform: translateY(-140px); }
61+
}
62+
63+
@keyframes shadow {
64+
0% { transform: scaleX(1); opacity: 0.3; }
65+
100% { transform: scaleX(0.5); opacity: 0.08; }
66+
}

‎public/cards.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2277,5 +2277,13 @@
22772277
"pageLink": "./Art/zkuperberg-hourglass/index.html",
22782278
"imageLink": "./Art/zkuperberg-hourglass/icon.png",
22792279
"projectPath": "Art/zkuperberg-hourglass"
2280+
},
2281+
{
2282+
"author": "Tenzing",
2283+
"artName": "bouncing-balls",
2284+
"githubLink": "https://github.com/namte24",
2285+
"pageLink": "./Art/tenzing-animation/index.html",
2286+
"imageLink": "./Art/tenzing-animation/balls.png",
2287+
"projectPath": "Art/tenzing-animation"
22802288
}
22812289
]

0 commit comments

Comments
 (0)