Site URL: https://www.rikiyaklasen.com/
Hi! I am trying to create an intro splash page for my portfolio, but I'm having trouble using the localstorage tool when I'm injecting code in to the advanced settings within my homepage. Every time I click on the logo (which takes me back to the homepage), it not only plays the splash page again, but it plays it in inconsistent times of the source image/gif.
This is currently the code I have specifically for the homepage:
<div id="rk-loading-animation">
<div class="loading-graphic">
<video width="100%" height="100%" controls autoplay="autoplay" autoplay muted id="videoId">
<source src="https://static1.squarespace.com/static/5f9b148981c6990a90ea3a5b/t/6190cf055886f71414671c8c/1636880139746/Intro+Splash+lg+black.mp4" type="video/mp4">
</video>
</div>
</div> <script>
var seenSplash = localStorage.seenScreen
seenSplash ? showScreen() : console.log('Do not show screen')
function hideAnimation(){
document.querySelector("#rk-loading-animation").classList.add("hide-animation");
}
setTimeout(function(){
setTimeout(function(){
hideAnimation()
}, 500);
let checkLoad = setInterval(function(){
if (document.readyState === "complete"){
hideAnimation();
clearInterval(checkLoad)
}
}, 100);
}, 1500);
</script>
Along with this for custom CSS:
#rk-loading-animation{
position:fixed;
z-index:9999;
height:100vh;
width:100vw;
background:#000;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
animation-name:slideOut;
animation-fill-mode:forwards;
animation-duration:5s;
animation-delay:7.5s;
}
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-pausebutton {
display: none!important;
}
@keyframes slideOut{
from{margin-left:0vw;}
to{margin-left:-150vw}
}
Do any of you guys know how I can correctly implement localstorage to achieve having my splash page appear only on initial visit? I've looked for localstorage and splash page tutorials everywhere and none seem to help me at all. Also please keep in mind I'm still a beginner in javascript. Thanks!
