ARTICLE AD BOX
I'm trying to make an animation before the page appear slowly with it's opacity. I think I found a good way but I'm not sure if it is the best. The only thing is that it makes the page blink when reloading...
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="scripts/session_startup_animation.js"></script> </head> <body style="opacity: 0"> <p>Things that are incredible.</p> <p>Other better things.</p> </body> </html>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(); } }