voussoir/voussoir.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use animationend event instead of settimeout.

Browse source
This commit is contained in:
voussoir 2023-04-28 23:49:06 -07:00
parent 369fecd2c4
commit c273972831
1 changed files with 21 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
voussoir.net/index.html
View file

@ -112,7 +112,7 @@ code { font-family: monospace; }
{ {
animation-name: splash_pulsate; animation-name: splash_pulsate;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-iteration-count: infinite; animation-iteration-count: 16;
/* Helps prevent line wrap changing height on narrow screens */ /* Helps prevent line wrap changing height on narrow screens */
height: 2em; height: 2em;
} }
@ -1348,7 +1348,6 @@ const SUNGLASSES_SPLASHES = [
SPLASHES.push(...SUNGLASSES_SPLASHES); SPLASHES.push(...SUNGLASSES_SPLASHES);
SPLASHES.push(`${SPLASHES.length + 1} splash texts? that's a lot!`); SPLASHES.push(`${SPLASHES.length + 1} splash texts? that's a lot!`);
let SPLASH_INDEX = 0; let SPLASH_INDEX = 0;
const SPLASH_INTERVAL = 8000;
function shuffle_splashes() function shuffle_splashes()
{ {
@ -1378,14 +1377,10 @@ function next_splash_text()
return text; return text;
} }
let splash_anim_timeout;
const HEADLINE_SPLASH = document.getElementById("headline_splash"); const HEADLINE_SPLASH = document.getElementById("headline_splash");
function splash_fade_out() function splash_animationend(event)
{ {
HEADLINE_SPLASH.classList.add("shrink_out"); if (HEADLINE_SPLASH.classList.contains("shrink_out"))
splash_anim_timeout = setTimeout(splash_fade_in, 250);
}
function splash_fade_in()
{ {
HEADLINE_SPLASH.classList.remove("shrink_out"); HEADLINE_SPLASH.classList.remove("shrink_out");
const new_text = next_splash_text(); const new_text = next_splash_text();
@ -1395,18 +1390,21 @@ function splash_fade_in()
} }
HEADLINE_SPLASH.innerText = new_text; HEADLINE_SPLASH.innerText = new_text;
HEADLINE_SPLASH.classList.add("grow_in"); HEADLINE_SPLASH.classList.add("grow_in");
splash_anim_timeout = setTimeout(splash_fade_end, 250);
} }
function splash_fade_end() else if (HEADLINE_SPLASH.classList.contains("grow_in"))
{ {
HEADLINE_SPLASH.classList.remove("grow_in"); HEADLINE_SPLASH.classList.remove("grow_in");
splash_anim_timeout = setTimeout(cycle_splash, SPLASH_INTERVAL); }
else
{
HEADLINE_SPLASH.classList.add("shrink_out");
}
} }
function cycle_splash() function cycle_splash()
{ {
clearTimeout(splash_anim_timeout); HEADLINE_SPLASH.classList.add("shrink_out");
splash_fade_out();
} }
HEADLINE_SPLASH.addEventListener("animationend", splash_animationend);
//////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////