diff --git a/voussoir.net/index.html b/voussoir.net/index.html index ab06e15..813da69 100644 --- a/voussoir.net/index.html +++ b/voussoir.net/index.html @@ -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,35 +1377,34 @@ function next_splash_text() return text; } -let splash_anim_timeout; const HEADLINE_SPLASH = document.getElementById("headline_splash"); -function splash_fade_out() +function splash_animationend(event) { - HEADLINE_SPLASH.classList.add("shrink_out"); - splash_anim_timeout = setTimeout(splash_fade_in, 250); -} -function splash_fade_in() -{ - 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"))) + if (HEADLINE_SPLASH.classList.contains("shrink_out")) { - reveal_sunglasses(); + 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"))) + { + reveal_sunglasses(); + } + HEADLINE_SPLASH.innerText = new_text; + HEADLINE_SPLASH.classList.add("grow_in"); + } + else if (HEADLINE_SPLASH.classList.contains("grow_in")) + { + HEADLINE_SPLASH.classList.remove("grow_in"); + } + else + { + HEADLINE_SPLASH.classList.add("shrink_out"); } - HEADLINE_SPLASH.innerText = new_text; - HEADLINE_SPLASH.classList.add("grow_in"); - splash_anim_timeout = setTimeout(splash_fade_end, 250); -} -function splash_fade_end() -{ - HEADLINE_SPLASH.classList.remove("grow_in"); - splash_anim_timeout = setTimeout(cycle_splash, SPLASH_INTERVAL); } function cycle_splash() { - clearTimeout(splash_anim_timeout); - splash_fade_out(); + HEADLINE_SPLASH.classList.add("shrink_out"); } +HEADLINE_SPLASH.addEventListener("animationend", splash_animationend); ////////////////////////////////////////////////////////////////////////////////////////////////////