Skip to content

Commit b097288

Browse files
Re-ShardRe-Shard
authored
Created first database animation (#2912)
1 parent f56dc3c commit b097288

File tree

3 files changed

+259
-0
lines changed

3 files changed

+259
-0
lines changed

‎Art/Re-Shard-databasequery/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="nl">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Geanimeerde CSS Database</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<!-- De database-container heeft een vaste maat en overflow: visible zodat content buiten kan komen -->
11+
<div class="database">
12+
<!-- Bovenste dekseltje -->
13+
<div class="lid top-lid">DATABASE</div>
14+
15+
<!-- Midden (de “body” van de database) -->
16+
<div class="db-body"></div>
17+
18+
<!-- Onderste dekseltje -->
19+
<div class="lid bottom-lid"></div>
20+
21+
<!-- Content die van boven komt: de query -->
22+
<div class="query-container">
23+
<span class="query">SELECT * FROM tabel;</span>
24+
</div>
25+
26+
<!-- Content die van onder komt: eerst de tabel, dan de grafiek -->
27+
<div class="table-container">
28+
<table>
29+
<tr>
30+
<th>ID</th>
31+
<th>Naam</th>
32+
<th>Waarde</th>
33+
</tr>
34+
<tr>
35+
<td>1</td>
36+
<td>Item A</td>
37+
<td>100</td>
38+
</tr>
39+
<tr>
40+
<td>2</td>
41+
<td>Item B</td>
42+
<td>200</td>
43+
</tr>
44+
</table>
45+
</div>
46+
47+
<div class="chart-container">
48+
<svg viewBox="0 0 300 150" width="300" height="150">
49+
<polyline points="0,100 50,60 100,80 150,40 200,70 250,30 300,50" fill="none" stroke="blue" stroke-width="2"/>
50+
</svg>
51+
</div>
52+
</div>
53+
</body>
54+
</html>

‎Art/Re-Shard-databasequery/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Database-query",
3+
"githubHandle": "Re-Shard"
4+
}

‎Art/Re-Shard-databasequery/styles.css‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
/* Algemene reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
/* Body- en container-instellingen */
9+
body {
10+
background: #f0f0f0;
11+
font-family: Arial, sans-serif;
12+
height: 100vh;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
}
17+
18+
.database {
19+
position: relative;
20+
width: 300px;
21+
height: 200px;
22+
perspective: 800px;
23+
overflow: visible; /* zodat elementen buiten de box getoond worden */
24+
}
25+
26+
/* Basisstijl voor beide dekseltjes */
27+
.lid {
28+
position: absolute;
29+
left: 0;
30+
width: 100%;
31+
background: #3498db;
32+
color: white;
33+
text-align: center;
34+
line-height: 50px;
35+
font-weight: bold;
36+
backface-visibility: hidden;
37+
}
38+
39+
/* Bovenste dekseltje (top-lid) */
40+
.top-lid {
41+
top: 0;
42+
height: 50px;
43+
transform-origin: bottom center;
44+
/* Animatie voor top-lid:
45+
- 0–1s: gesloten,
46+
- 1–2s: opent (roteren naar -90°),
47+
- 2–4s: open,
48+
- 4–5s: sluit weer,
49+
- daarna gesloten. */
50+
animation: topLidAnim 10s forwards;
51+
}
52+
53+
/* Onderste dekseltje (bottom-lid) */
54+
.bottom-lid {
55+
bottom: 0;
56+
height: 50px;
57+
transform-origin: top center;
58+
/* Animatie voor bottom-lid:
59+
- 0–4s: gesloten,
60+
- 4–5s: opent (voor de tabel),
61+
- 5–6s: open,
62+
- 6–7s: sluit,
63+
- 7–8s: opent (voor de grafiek),
64+
- 8–9s: open,
65+
- 9–10s: sluit. */
66+
animation: bottomLidAnim 10s forwards;
67+
}
68+
69+
/* De “body” van de database (visueel een frame) */
70+
.db-body {
71+
position: absolute;
72+
top: 50px;
73+
left: 0;
74+
width: 100%;
75+
height: 100px;
76+
background: #ecf0f1;
77+
border: 2px solid #3498db;
78+
}
79+
80+
/* --- Content die buiten komt --- */
81+
82+
/* Query-container: verschijnt bovenaan (onder het top-lid) */
83+
.query-container {
84+
position: absolute;
85+
top: -40px; /* startpositie net boven de database */
86+
width: 100%;
87+
text-align: center;
88+
opacity: 0;
89+
/* Laat de query-container binnen 1 seconde (na 1s vertraging) naar beneden schuiven
90+
en fade-in, en weer verdwijnen als het top-lid sluit */
91+
animation: slideDown 1s forwards 1s, fadeOut 0.5s forwards 4s;
92+
}
93+
94+
/* De query: typewriter-effect */
95+
.query {
96+
font-family: monospace;
97+
font-size: 16px;
98+
display: inline-block;
99+
white-space: nowrap;
100+
overflow: hidden;
101+
border-right: 2px solid black;
102+
width: 0; /* start met 0 breedte */
103+
/* Typewriter-effect: begint na 1s, duurt 2s */
104+
animation: typing 2s steps(30, end) forwards 1s, blink-caret 0.75s step-end infinite 3s;
105+
}
106+
107+
/* Tabel-container: verschijnt onderaan (onder het bottom-lid) */
108+
.table-container {
109+
position: absolute;
110+
bottom: -150px; /* start buiten beeld */
111+
width: 100%;
112+
text-align: center;
113+
opacity: 0;
114+
/* Laat de tabel binnen 1s vanuit de onderkant verschijnen (start bij 4s),
115+
en laat hem weer vervagen als de klep sluit (vanaf 6s) */
116+
animation: slideUp 1s forwards 4s, fadeOut 0.5s forwards 6s;
117+
}
118+
119+
/* Chart-container: verschijnt later onderaan */
120+
.chart-container {
121+
position: absolute;
122+
bottom: -150px;
123+
width: 100%;
124+
text-align: center;
125+
opacity: 0;
126+
/* Laat de grafiek binnen 1s vanuit de onderkant verschijnen (start bij 7s),
127+
en laat hem weer vervagen als de klep sluit (vanaf 9s) */
128+
animation: slideUp 1s forwards 7s, fadeOut 0.5s forwards 9s;
129+
}
130+
131+
/* Tabel-opmaak */
132+
table {
133+
width: 90%;
134+
border-collapse: collapse;
135+
margin: 0 auto;
136+
font-size: 14px;
137+
}
138+
139+
th, td {
140+
border: 1px solid #ccc;
141+
padding: 5px;
142+
}
143+
144+
th {
145+
background: #2ecc71;
146+
color: white;
147+
}
148+
149+
/* --- Animatie Keyframes --- */
150+
151+
/* Top-lid animatie */
152+
@keyframes topLidAnim {
153+
0% { transform: rotateX(0deg); }
154+
10% { transform: rotateX(0deg); }
155+
20% { transform: rotateX(-90deg); }
156+
40% { transform: rotateX(-90deg); }
157+
50% { transform: rotateX(0deg); }
158+
100% { transform: rotateX(0deg); }
159+
}
160+
161+
/* Bottom-lid animatie */
162+
@keyframes bottomLidAnim {
163+
0% { transform: rotateX(0deg); }
164+
40% { transform: rotateX(0deg); }
165+
50% { transform: rotateX(90deg); }
166+
60% { transform: rotateX(90deg); }
167+
70% { transform: rotateX(0deg); }
168+
80% { transform: rotateX(90deg); }
169+
90% { transform: rotateX(90deg); }
170+
100% { transform: rotateX(0deg); }
171+
}
172+
173+
/* Slide-down voor query (van boven naar zijn plek) */
174+
@keyframes slideDown {
175+
from { transform: translateY(-50px); opacity: 0; }
176+
to { transform: translateY(0); opacity: 1; }
177+
}
178+
179+
/* Slide-up voor tabel en grafiek (van onder naar zijn plek) */
180+
@keyframes slideUp {
181+
from { transform: translateY(50px); opacity: 0; }
182+
to { transform: translateY(0); opacity: 1; }
183+
}
184+
185+
/* Fade-out (voor het geleidelijk verdwijnen van content) */
186+
@keyframes fadeOut {
187+
from { opacity: 1; }
188+
to { opacity: 0; }
189+
}
190+
191+
/* Typewriter-effect: breidt de breedte uit */
192+
@keyframes typing {
193+
from { width: 0; }
194+
to { width: 100%; }
195+
}
196+
197+
/* Knipperende cursor */
198+
@keyframes blink-caret {
199+
50% { border-color: transparent; }
200+
}
201+

0 commit comments

Comments
 (0)