Я пытаюсь создать анимацию до того, как страница будет медленно появляться с ее непрозрачностью. Думаю, я нашел хороший способ, но не уверен, что он лучший. Единственное, страница мигает при перезагрузке...
index.html
Things that are incredible.
Other better things.
session_startup_animation.js
async function sessionStartupAnimation()
{
// Page setup
let all_default_elements = document.body.querySelectorAll("*");
all_default_elements.forEach((elem) => elem.style.opacity = 0);
// Beautiful animation
// Showing page
all_default_elements.forEach((elem) => elem.style.animation = "opacity-fade-in 0.5s");
all_default_elements.forEach((elem) => elem.style.opacity = 1);
}
// Only start animation once per session
window.onload = () => {
document.body.style.opacity = 1;
if(!sessionStorage.getItem("hasExecutedSessionStartupAnimation"))
{
sessionStorage.setItem("hasExecutedSessionStartupAnimation", "true");
sessionStartupAnimation();
}
}
Подробнее здесь: https://stackoverflow.com/questions/799 ... -page-load