rikifromjapan Posted November 14, 2021 Share Posted November 14, 2021 (edited) 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 November 14, 2021 by rikifromjapan Changed the source gif Link to comment
Beyondspace Posted November 14, 2021 Share Posted November 14, 2021 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 - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
rikifromjapan Posted November 14, 2021 Author Share Posted November 14, 2021 (edited) 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 November 14, 2021 by rikifromjapan Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment