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

30
voussoir.net/index.html
View file

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