.stage {
position: relative;
height: 69px;
width: calc(69px * 429 / 129);
aspect-ratio: 429 / 129;
}
.layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.trail {
z-index: 1;
clip-path: inset(0 100% 0 0);
animation: revealTrail 0.61s linear 1 both;
}
.shuttle {
z-index: 2;
animation: flyShuttle 0.61s linear 1 both;
}
.text {
z-index: 3;
opacity: 0;
transform: translateY(10px);
animation: showText 0.105s ease-out 0.675s 1 both;
}
/* Punkt zaczepienia = najniżej położony niebieski piksel lotki (403,123 w skali 429x129) */
@keyframes revealTrail {
0.00% { clip-path: inset(0 100.0% 0 0); }
8.33% { clip-path: inset(0 100.0% 0 0); }
16.67% { clip-path: inset(0 97.9% 0 0); }
25.00% { clip-path: inset(0 88.8% 0 0); }
33.33% { clip-path: inset(0 79.6% 0 0); }
41.67% { clip-path: inset(0 70.4% 0 0); }
50.00% { clip-path: inset(0 61.2% 0 0); }
58.33% { clip-path: inset(0 52.0% 0 0); }
66.67% { clip-path: inset(0 42.8% 0 0); }
75.00% { clip-path: inset(0 33.6% 0 0); }
83.33% { clip-path: inset(0 24.4% 0 0); }
91.67% { clip-path: inset(0 15.2% 0 0); }
100.00% { clip-path: inset(0 0.0% 0 0); }
}
@keyframes flyShuttle {
0.00% { transform: translate(-110.26%, -36.81%); }
8.33% { transform: translate(-101.07%, -34.85%); }
16.67% { transform: translate(-91.88%, -35.27%); }
25.00% { transform: translate(-82.69%, -35.66%); }
33.33% { transform: translate(-73.50%, -36.43%); }
41.67% { transform: translate(-64.32%, -37.21%); }
50.00% { transform: translate(-55.13%, -37.21%); }
58.33% { transform: translate(-45.94%, -36.82%); }
66.67% { transform: translate(-36.75%, -34.50%); }
75.00% { transform: translate(-27.56%, -30.23%); }
83.33% { transform: translate(-18.38%, -23.64%); }
91.67% { transform: translate(-9.19%, -14.73%); }
100.00% { transform: translate(0.00%, 0.00%); }
}
@keyframes showText {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
const stage = document.querySelector('.stage');
const layers = stage.querySelectorAll('.layer');
function restartAnimation() {
layers.forEach(el => {
el.style.animation = 'none';
});
// wymuszenie reflow, aby przeglądarka "zapomniała" stan animacji
void stage.offsetWidth;
layers.forEach(el => {
el.style.animation = '';
});
}
// automatyczny restart co 5 sekund (5000 ms)
setInterval(restartAnimation, 5000);
.stage {
position: relative;
height: 69px;
width: calc(69px * 429 / 129);
aspect-ratio: 429 / 129;
}
.layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.trail {
z-index: 1;
clip-path: inset(0 100% 0 0);
animation: revealTrail 0.61s linear 1 both;
}
.shuttle {
z-index: 2;
animation: flyShuttle 0.61s linear 1 both;
}
.text {
z-index: 3;
opacity: 0;
transform: translateY(10px);
animation: showText 0.105s ease-out 0.675s 1 both;
}
/* Punkt zaczepienia = najniżej położony niebieski piksel lotki (403,123 w skali 429x129) */
@keyframes revealTrail {
0.00% { clip-path: inset(0 100.0% 0 0); }
8.33% { clip-path: inset(0 100.0% 0 0); }
16.67% { clip-path: inset(0 97.9% 0 0); }
25.00% { clip-path: inset(0 88.8% 0 0); }
33.33% { clip-path: inset(0 79.6% 0 0); }
41.67% { clip-path: inset(0 70.4% 0 0); }
50.00% { clip-path: inset(0 61.2% 0 0); }
58.33% { clip-path: inset(0 52.0% 0 0); }
66.67% { clip-path: inset(0 42.8% 0 0); }
75.00% { clip-path: inset(0 33.6% 0 0); }
83.33% { clip-path: inset(0 24.4% 0 0); }
91.67% { clip-path: inset(0 15.2% 0 0); }
100.00% { clip-path: inset(0 0.0% 0 0); }
}
@keyframes flyShuttle {
0.00% { transform: translate(-110.26%, -36.81%); }
8.33% { transform: translate(-101.07%, -34.85%); }
16.67% { transform: translate(-91.88%, -35.27%); }
25.00% { transform: translate(-82.69%, -35.66%); }
33.33% { transform: translate(-73.50%, -36.43%); }
41.67% { transform: translate(-64.32%, -37.21%); }
50.00% { transform: translate(-55.13%, -37.21%); }
58.33% { transform: translate(-45.94%, -36.82%); }
66.67% { transform: translate(-36.75%, -34.50%); }
75.00% { transform: translate(-27.56%, -30.23%); }
83.33% { transform: translate(-18.38%, -23.64%); }
91.67% { transform: translate(-9.19%, -14.73%); }
100.00% { transform: translate(0.00%, 0.00%); }
}
@keyframes showText {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
const stage = document.querySelector('.stage');
const layers = stage.querySelectorAll('.layer');
function restartAnimation() {
layers.forEach(el => {
el.style.animation = 'none';
});
// wymuszenie reflow, aby przeglądarka "zapomniała" stan animacji
void stage.offsetWidth;
layers.forEach(el => {
el.style.animation = '';
});
}
// automatyczny restart co 5 sekund (5000 ms)
setInterval(restartAnimation, 5000);
Nadchodzące turnieje badmintona
Poniżej zamieszczamy harmonogram nadchodzących turniejów badmintona 👉 Jak się zgłosić? Wyślij zgłoszenie na adres: uksbadpul@gmail.comPodaj: 📌 Terminy zgłoszeń: Do…
Turniej Badmintona z Okazji Dnia Kobiet – Podsumowanie! 🏆
Za nami kolejne emocjonujące badmintonowe zmagania! 🎉W sobotę 8 marca 2025 roku odbył się turniej zorganizowany przez Uczniowski Klub…
Szkolenie dla zawodników badmintona – 14-16 marca 2025 r.
Zapraszamy wszystkich pasjonatów badmintona na intensywne szkolenie, które odbędzie się w dniach 14-16 marca 2025 r. w Puławach i…
TURNIEJ BADMINTONA Z OKAZJI DNIA KOBIET!💚
Serdecznie zapraszamy wszystkich pasjonatów badmintona na Turniej Badmintona z Okazji Dnia Kobiet, który odbędzie się 8 marca 2025 r.…
ZAPRASZAMY! – XI Otwarte Mistrzostwa Puław w Badmintonie
XI Otwarte Mistrzostwa Puław w Badmintonie 🎉 📢 Gotowi na sportowe emocje? Już w w kolejny weekend czeka na…
Podsumowanie IV Turnieju o Puchar Prezydenta Miasta Puławy w Badmintonie
9 listopada 2024 roku Puławy były gospodarzem IV Turnieju o Puchar Prezydenta Miasta Puławy w Badmintonie dla dzieci i…
IV Turniej o Puchar Prezydenta Miasta Puławy w Badmintonie dla Dzieci i Młodzieży do 16 lat! 🏆
Serdecznie zapraszamy wszystkich młodych pasjonatów badmintona do udziału w IV Turnieju o Puchar Prezydenta Miasta Puławy! To wyjątkowa okazja,…
IV Turniej o Puchar Prezydenta Miasta Puławy w Badmintonie – Relacja
W niedzielę 27.10.2024 w Hali Sportowej Zespołu Szkół Technicznych w Puławach odbył się IV Turniej o Puchar Prezydenta Miasta…
IV Turniej o Puchar Prezydenta Miasta Puławy w badmintonie
Zapraszamy 27.10.2024r. naIV Turniej o Puchar Prezydenta Miasta Puławy w badmintonie Do zobaczenia na kortach Regulamin IV Turniej o Puchar Prezydenta…
Medal XXV-lecia ŚWWZBad dla członków Klubu
Podziękowania i gratulacje! Z ogromną radością informujemy, że członkowie Uczniowskiego Klubu Sportowego Badminton Puławy zostali uhonorowani Medalem XXV-lecia ŚWWZBad…