ulysse
/
Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Syncronized sound and animation and cleaner interruption

This commit is contained in:
Ulysse Cura 2026-03-08 13:37:13 +01:00
parent d8aef442a4
commit fd9d19d275
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
scripts/session_startup_animation.js
View File

@ -9,10 +9,13 @@ function waitForAnimationEnd(elem, animationName)
resolve(); resolve();
} }
} }
elem.onanimationend = handleAnimationEnd; elem.onanimationend = handleAnimationEnd;
}); });
} }
let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3");
async function sessionStartupAnimation() async function sessionStartupAnimation()
{ {
// Page setup // Page setup
@ -48,11 +51,10 @@ async function sessionStartupAnimation()
text_elem.className = "startup-animation-text"; text_elem.className = "startup-animation-text";
text_elem.innerHTML = quote.text; text_elem.innerHTML = quote.text;
let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3");
sound.play();
document.body.appendChild(text_elem); document.body.appendChild(text_elem);
sound.play();
await waitForAnimationEnd(text_elem, "text-animation"); await waitForAnimationEnd(text_elem, "text-animation");
// Fade out for both // Fade out for both
@ -73,8 +75,13 @@ async function sessionStartupAnimation()
function interruptStartingAnimation() function interruptStartingAnimation()
{ {
// Bad but works in this context let author_elem = document.body.querySelector(".startup-animation-author");
window.location.reload(); author_elem.getAnimations().forEach((animation) => animation.finish());
let text_elem = document.body.querySelector(".startup-animation-text");
text_elem.getAnimations().forEach((animation) => animation.finish());
sound.currentTime = 2.75;
} }
window.onkeydown = () => { window.onkeydown = () => {

2
styles/session_startup_animation.css
View File

@ -66,7 +66,7 @@
width: 100%; width: 100%;
top: 25%; top: 25%;
text-align: center; text-align: center;
animation: text-animation 2.5s ease-in-out, opacity-fade-in 1s; animation: text-animation 3s ease-in-out, opacity-fade-in 1s;
} }
.startup-animation-author { .startup-animation-author {