After successfully implementing a splash screen that only plays once on page load, I encountered an issue. When I close the tab and revisit the page, the splash screen no longer plays. Is there a way to fix this problem? Perhaps by setting a time limit for the JS function to reset? Any assistance with writing the code would be greatly appreciated :)
HTML:
<div class="splash">
<h1 class="splash-content" id="content1">Sub/h1>
<h1 class="splash-content" id="content2">Sub</h1>
<h1 class="splash-content" id="content3">Sub</h1>
</div>
CSS:
.splash {
background: black;
z-index: 2;
text-align: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
transition: 4s;
}
.splash-content {
color: white;
transform: translateY(11em);
}
.splash.display-none{
opacity: 0;
z-index: 0;
transform: translateY(-100%);
transition: 1.5s;
}
.splash.post_animated {
display: none;
}
#content1 {
animation: come-in-first 2s ease-in;
}
#content2 {
animation: come-in-second 3s ease-in;
}
#content3 {
transform: translate(4px, 11em);
animation: come-in-third 4s ease-in;
}
@keyframes come-in-first {
0% {
transform: translateY(13em);
opacity: 0;
}
}
@keyframes come-in-second {
0%, 50% {
transform: translateY(11.5em);
opacity: 0;
}
}
@keyframes come-in-third {
0%, 60% {
transform: translate(4px, 11.5em);
opacity: 0;
}
}
JS:
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none');
}, 6000);
})
var firstContainer = document.querySelector(".splash");
var result = localStorage.getItem('hasRan');
if (!result) {
localStorage.setItem('hasRan', true);
} else {
firstContainer.classList.remove("animated");
firstContainer.classList.add("post_animated");
}
If you're finding it hard to understand, my aim is to reset the "result" function when the page is closed so that the splash screen appears again when reopening the page.