Jump to content

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

Recommended Posts

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!

Edited by rikifromjapan
Changed the source gif
Link to comment
  • Replies 2
  • Views 925
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.

Edited by rikifromjapan
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.