Create page loading/page transition effect

I'm glad I found this thread. Your suggestions were spot-on!

On 12/7/2023 at 3:24 PM, tuanphan said:

updated code, I added some attributes, you try adding it again, if it still doesn't work, try moving the code to Code Injection > Header,

if it still doesn't work, you can keep the code, I can check again easier

 

As a further question to this code: Would it be possible to attach this code to the index-page and be visible only once, when you first open the page and then not again anymore, until you revisit the site again.

We refer back to the index page every sub-page, but now that action happens every time you redirect yourself to that main index page.

I applied the code to the footer of the specific index page (All projects/ .sqs-gallery-design-autocolumns), but that doesn't solve the reoccurring of the logo action.

our site: https://www.burtonhamfelt.nl/

On 3/19/2024 at 11:01 PM, bhua_2022 said:

As a further question to this code: Would it be possible to attach this code to the index-page and be visible only once, when you first open the page and then not again anymore, until you revisit the site again.

We refer back to the index page every sub-page, but now that action happens every time you redirect yourself to that main index page.

I applied the code to the footer of the specific index page (All projects/ .sqs-gallery-design-autocolumns), but that doesn't solve the reoccurring of the logo action.

 

our site: https://www.burtonhamfelt.nl/

 

I see some code in this thread, which code did you use? I can adjust for your site easier

14 minutes ago, tuanphan said:

I see some code in this thread, which code did you use? I can adjust for your site easier

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <img src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/65f9bcbd71c39d12a15aae94/1710865597709/BurtonHamfelt+-+Logo+-+2024+-+white.png"/>
</div>

<style>
  div#loader-container img {
    max-width:150px;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: .65s;
    animation-delay: 1s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-top: 0vw;
    }
    to {
      margin-top: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
      max-width: 150px;
}
   @keyframes slideOut {
    from {
      margin-top: 0vw;
    }
    to {
      margin-top: -600vw;
    }
  }
    
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(500);
    }, 3000);
});
</script>

//////////////

the image I would like to switch with a 2second video in the end. This code works perfectly, only does it show up every time you're redirected to the indexpage, which is often. I would like to alter the code so that it pop-ups only once when you enter the site for the first time.

On 3/21/2024 at 3:49 PM, bhua_2022 said:

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <img src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/65f9bcbd71c39d12a15aae94/1710865597709/BurtonHamfelt+-+Logo+-+2024+-+white.png"/>
</div>

<style>
  div#loader-container img {
    max-width:150px;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: .65s;
    animation-delay: 1s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-top: 0vw;
    }
    to {
      margin-top: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
      max-width: 150px;
}
   @keyframes slideOut {
    from {
      margin-top: 0vw;
    }
    to {
      margin-top: -600vw;
    }
  }
    
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(500);
    }, 3000);
});
</script>

 

 

 

//////////////

the image I would like to switch with a 2second video in the end. This code works perfectly, only does it show up every time you're redirected to the indexpage, which is often. I would like to alter the code so that it pop-ups only once when you enter the site for the first time.

You can use script 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>