How can I create my splash screen to appear only on the initial load when a visitor lands on homepage?

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!

6 hours ago, rikifromjapan said:

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">
    <img src="https://static1.squarespace.com/static/5f9b148981c6990a90ea3a5b/t/6190cf055886f71414671c8c/1636880139746/Intro+Splash+lg+black.mp4>
  </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:7s;
  animation-delay:7s;
}

@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!

Have you considered the solution of redirecting the link on logo to another page instead of Home page?

I actually haven't, but I'll try that forsure. But the same time, I want to know more about how to correctly implement localstorage for future reference. Are you able to help me with that?

Edit: It's not just when I click the logo, it's also when I refresh the page that the intro splash screen shows up.