How get the loading page to load once per page view

Hi all,

I desperately need help with a my loading page. It works fine however I would like it to load once per page view. Everytime I head back to the homepage it loads. I have used a css workaround. no js at the moment.  

Code snippet below

#footer-sections, #page {
z-index:unset !important;
}

body:not(.sqs-edit-mode) {
footer .page-section:nth-child(1) {
  position:fixed !important;
  top:0;
  bottom:0;
  left:0;
  right:0;
  animation:fadeOut 1s ease-out 5s 1 forwards;
  pointer-events: none;
  z-index:9999999;

}
  
}

@media @mobile {
footer .page-section:nth-child(1) { 
 display:none;
}
}

@keyframes fadeOut {
  0% {
    opacity: 1;
   
  }
  100% {
    opacity: 0;
  
  }

}

body:not(.homepage):not(.sqs-edit-mode) footer .page-section:nth-child(1) { 
 display:none;
}

Can you share link to page where you use effect? We can check easier

@tuanphan https://octopus-gecko-238e.squarespace.com/?noredirect password:dillman

It's still under development. I placed a video section in the footer and used the css code above. I also found this code and it works, but I am trying to add a video MP4 instead of an image.
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #000;
  /* SET BACKGROUND SIZE */
  background-size: 900px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/615511949ed8082b26e26898/t/61627c55e182b11f3f0eab7e/1633844315598/SD2.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(1900).fadeOut(1800);
})
</script>

@tuanphan Any luck?

On 4/29/2024 at 10:48 AM, Cbelle said:

@tuanphan https://octopus-gecko-238e.squarespace.com/?noredirect password:dillman

It's still under development. I placed a video section in the footer and used the css code above. I also found this code and it works, but I am trying to add a video MP4 instead of an image.
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #000;
  /* SET BACKGROUND SIZE */
  background-size: 900px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/615511949ed8082b26e26898/t/61627c55e182b11f3f0eab7e/1633844315598/SD2.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(1900).fadeOut(1800);
})
</script>

 

Change this line

<div class="logoload"></div>

to this

<div class="logoload" id="loader-container"></div>

Next, add this code under your code

<script>
  // Check if the animation state is stored in sessionStorage
  const isAnimationPlayed = sessionStorage.getItem("animationPlayed");

  // Reference to the splash-wrapper div with a specified ID
  const splashWrapper = document.getElementById("loader-container");

  // If the animation has already played, hide it and remove it from the DOM
  if (isAnimationPlayed) {
    splashWrapper.style.display = "none";
    splashWrapper.remove(); // Remove the splash wrapper from the DOM
  } else {
    // If the animation hasn't played yet, mark it as played and store it in sessionStorage
    sessionStorage.setItem("animationPlayed", "true");
  }
</script>

With video, can you send video file?