Jump to content

Create page loading/page transition effect

Go to solution Solved by tuanphan,

Recommended Posts

Posted
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/

 

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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.

Posted
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 months later...
Posted (edited)

Hi Tuan! @tuanphan

We now have decided on which video to use for the landing-page, however I can't seem to make the video play automatically when entering the website. It looks as if it just sits there as a still frame, with an odd crop?

Could you please help me tweak the code? Secondly, I would like for the video, when finished playing, to just disappear and not do that slide to the left anymore. But just be gone with no extra effect, or if an effect is needed maybe a fade out?

Hope you can help me!

website: Burton Hamfelt

videolink (added into the squarespace files): https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4

 

 

Code used: 

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <video src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4"/>
</div>

<style>
  div#loader-container video {
    max-width:100%;
}
  /* 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: 0.5s;
    animation-delay: 3s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</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>

Edited by bhua_2022
  • 3 weeks later...
Posted

Hi there, any chance you could help me with a specific request as well @tuanphan? 🙏

I'm trying to add a loading page to the below website - only whilst the homepage is loading, not between transitions of the page. I tried the codes in this thread but they all seem to apply to the whole website. 

I've attached the .gif I'd like to add alongside some some text on a black background, but I can adjust this later I think.

https://hollen-hollenplus.squarespace.com
Password: Tester

Thanks so much!

_HOL_Symbol_colour.gif

Posted
On 7/1/2024 at 10:24 PM, lisanemetz said:

Hi there, any chance you could help me with a specific request as well @tuanphan? 🙏

I'm trying to add a loading page to the below website - only whilst the homepage is loading, not between transitions of the page. I tried the codes in this thread but they all seem to apply to the whole website. 

I've attached the .gif I'd like to add alongside some some text on a black background, but I can adjust this later I think.

https://hollen-hollenplus.squarespace.com
Password: Tester

Thanks so much!

_HOL_Symbol_colour.gif

Tester

password is incorrect

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 7/10/2024 at 3:05 PM, lisanemetz said:

Hey @tuanphan, sorry it's lower case t - 'tester'. Could you have another look please? 🙏 Thanks!

Use this code to Homepage Header Injection

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* 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: 0.65s;
    animation-delay:10s;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</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>

image.thumb.png.8d335f8c91427c193dc59099ea443002.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 7/13/2024 at 9:42 AM, tuanphan said:

Use this code to Homepage Header Injection

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* 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: 0.65s;
    animation-delay:10s;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</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>

image.thumb.png.8d335f8c91427c193dc59099ea443002.png

Thank you @tuanphan 🙌 is there a way of customising it, so that it only loads when opening the homepage, not all the other pages on the site? Thank you!

Posted (edited)
On 7/13/2024 at 8:42 AM, tuanphan said:

Use this code to Homepage Header Injection

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* 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: 0.65s;
    animation-delay:10s;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</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>

image.thumb.png.8d335f8c91427c193dc59099ea443002.png

This is exactly what I'm looking for to add to a client's website.

Is there a way @tuanphan to add a full-screen background image for desktop + mobile behind the animated logo?

Edited by matt_thewalkcreative
Posted
On 7/15/2024 at 2:19 PM, lisanemetz said:

Thank you @tuanphan 🙌 is there a way of customising it, so that it only loads when opening the homepage, not all the other pages on the site? Thank you!

You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages

body:not(.homepage) #loader-container {
	display: none !important;
}

 

On 7/17/2024 at 3:36 PM, matt_thewalkcreative said:

This is exactly what I'm looking for to add to a client's website.

Is there a way @tuanphan to add a full-screen background image for desktop + mobile behind the animated logo?

Use this new code, replace Pixabay with your background image url

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    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: 0.65s;
    animation-delay:10s;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 7/19/2024 at 10:45 AM, tuanphan said:

You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages

body:not(.homepage) #loader-container {
	display: none !important;
}

 

Use this new code, replace Pixabay with your background image url

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    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: 0.65s;
    animation-delay:10s;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</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>

 

That's great! Thank you – I'll give this a try.

Posted
On 7/19/2024 at 11:45 AM, tuanphan said:

You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages

body:not(.homepage) #loader-container {
	display: none !important;
}

 

Use this new code, replace Pixabay with your background image url

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    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: 0.65s;
    animation-delay:10s;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</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>

 

Thank you so much! This worked (the CSS option) - the only thing is that now when any of the other pages (not home) are loading, the screen turns white and then orange. Is there a way of making this just black if the page takes a moment to load? Thanks so much!

Posted
On 7/24/2024 at 9:34 PM, lisanemetz said:

Thank you so much! This worked (the CSS option) - the only thing is that now when any of the other pages (not home) are loading, the screen turns white and then orange. Is there a way of making this just black if the page takes a moment to load? Thanks so much!

Can you share site url? I can check problem easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
  • 2 months later...
Posted
5 hours ago, thorguldager said:

This example right here is exactly what i*m currently trying to do.

Could you share how it is made?

You can use this code to Page Header Injection (code will run on one page) or Website Tools > Code Injection > Footer (code will run on all pages).

here I use Lottie file, if you want to use image, send me image file, I will adjust the code for you

<!-- Load Lottie Player script -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <lottie-player id="loader" src="https://lottie.host/7134761f-9be6-42da-bb65-6ff81185617b/uEgxToPhd9.json"  background="transparent"  speed="1"  style="width: 275px; height: 275;"  loop autoplay></lottie-player>
</div>

<style>
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: #000000;
    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: 0.65s;
    animation-delay: 5s;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
</style>

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

image.thumb.png.7793e77d7304db59ef6a5e5af8016a52.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 4 weeks later...

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.