Refactor birthday, olympia, space, and sports animations; enhance symbol management and visual effects

- Updated birthday.js to improve balloon visuals and confetti effects, including new color schemes and enhanced pop animations.
- Removed legacy fallback logic in olympia.js and improved image error handling.
- Enhanced space.js with configurable counts for planets, astronauts, satellites, ISS, and rockets; improved shooting star animations and added random image swapping.
- Simplified sports.js by removing legacy emoji fallback logic and optimizing ball creation based on selected categories.
- Adjusted CSS styles across birthday, olympia, space, and sports for better visual consistency and performance.
[skip ci]
This commit is contained in:
CodeDevMLH
2026-02-27 01:18:08 +01:00
parent bdc7d2e325
commit 8f322fd6cf
10 changed files with 471 additions and 342 deletions

View File

@@ -36,18 +36,19 @@
position: absolute;
width: 250px;
height: 3px;
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
border-radius: 50%;
animation: space-shoot 8s linear infinite;
animation: space-shoot 25s linear infinite;
opacity: 0;
z-index: 12;
}
@keyframes space-shoot {
0% { left: var(--shoot-start-x); top: var(--shoot-start-y); opacity: 1; width: 0; }
5% { width: 300px; }
15% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
100% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
0% { transform: rotate(var(--shoot-angle)) translateX(0); opacity: 0; }
5% { opacity: 1; }
35% { opacity: 1; }
40% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
100% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
}
.space-symbol {
@@ -69,24 +70,30 @@
}
/* Specific elements scaling */
.space-planet1, .space-planet2 { font-size: 4rem; }
.space-planet1 img, .space-planet2 img { width: 8vh; max-width: 80px; }
.space-star { font-size: 2rem; opacity: 0.6; }
.space-star img { width: 3vh; max-width: 30px; }
.space-planet img { width: 8vh; max-width: 80px; }
.space-astronaut img { width: 10vh; max-width: 100px; }
.space-satellite img { width: 12vh; max-width: 120px; }
.space-iss img { width: 25vh; max-width: 180px; }
.space-rocket img { width: 12vh; max-width: 120px; }
@keyframes space-drift-right {
0% { transform: translateX(-10vw) translateY(0) scaleX(-1); }
50% { transform: translateX(50vw) translateY(-5vh) scaleX(-1); }
100% { transform: translateX(110vw) translateY(0) scaleX(-1); }
50% { transform: translateX(60vw) translateY(-30vh) scaleX(-1); }
100% { transform: translateX(140vw) translateY(0) scaleX(-1); }
}
@keyframes space-drift-left {
0% { transform: translateX(10vw) translateY(0); }
50% { transform: translateX(-50vw) translateY(5vh); }
100% { transform: translateX(-110vw) translateY(0); }
50% { transform: translateX(-60vw) translateY(30vh); }
100% { transform: translateX(-140vw) translateY(0); }
}
@keyframes space-slow-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes space-star-drift {
from { transform: translateY(0); }
to { transform: translateY(-100vh); }
}