Jump to content

Loading page with transition

Recommended Posts

Hey,

Wanting to have a loading page (one time only when directed to the website). Is it possible to have a separate GIF for computer screen, and a different .GIF for mobile? I have one for landscape (computer) and one vertical (mobile).

They are both .GIF animations. Mobile is 5.2MB. Computer screen is 4.4MB. Are these too big for quick loading?

Like to fill the frame, or at least have black background behind to fill the page behind animation. I do like the loading page transition you have mentioned in the past, exits quickly to the left, example below...

https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

Many thanks!!!

P.S It will not let me upload the .GIF files to show you an example, even though they are 5MB and under.

Edited by nickbarr
Link to comment
  • Replies 6
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

4 hours ago, nickbarr said:

Hey,

Wanting to have a loading page (one time only when directed to the website). Is it possible to have a separate GIF for computer screen, and a different .GIF for mobile? I have one for landscape (computer) and one vertical (mobile).

They are both .GIF animations. Mobile is 5.2MB. Computer screen is 4.4MB. Are these too big for quick loading?

Like to fill the frame, or at least have black background behind to fill the page behind animation. I do like the loading page transition you have mentioned in the past, exits quickly to the left, example below...

https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

Many thanks!!!

P.S It will not let me upload the .GIF files to show you an example, even though they are 5MB and under.

In my opinion, we will have 2 approaches for your requirement:

1. If you require to load only once when direct to the website (which means loading at the first time user access, on the next time, it won't happen), we need some js code to identify that that user has already accessed yet. Therefore it would require at lease the business plan to implement.

2. If you just require after a specific time, your image elements would fade out, we can use some CSS code to achieve it. However, every time clients access your site, they will appear

Which options do you refer to?

Edited by Beyondspace

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
On 3/28/2024 at 5:32 PM, nickbarr said:

Hey,

Thank you for explaining the different options. Option 2 please.

Much appreciated!!!!

You can use this code to Code Injection > Footer (or Page Header Code Injection). Replace Example Image with your image url

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2023_11/LogoTANIQtransparent.thumb.png.0c1808606ac76767e354e33194011587.png"/>
</div>

<style>
  @media screen and (max-width:767px) {
    .splash-wrapper img {
    	content: url(https://content.invisioncic.com/p289038/monthly_2023_11/LogoTANIQtransparent.thumb.png.0c1808606ac76767e354e33194011587.png);
    }
  }
  div#loader-container img {
    max-width:500px;
}
  /* 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: 5s;
  }

  @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.55eaf4ffe0bfc8472f6732b1eba32dee.png

image.thumb.png.2a7a1d882904c6b2b24f92c795403807.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!)

Link to comment

Thank you for responding. Almost there, just a few issues.

1. I would like the GIF to display full screen on both desktop and mobile, I tried a change in code  

div#loader-container img {
    max-width:100%;

Mobile GIF is 1080 × 1920

Desktop GIF is 2010 × 1200

2. Mobile it is not full screen and not centre (down from the top) screen grab attached.

3. My Navigation Bar at the top is now white (used to be black on main page) on the Overview page, it used to change color depending on what page it is showing. Site styles seems to not want to load anymore to check it.

4. Anyway to have the scroll bar on the left notshow when on the loading page?

5. I only want loading screen to play once when someone visits the site, not on every page.

Code seen below is what I currently have:

Footer:

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://static1.squarespace.com/static/5eb3110e12c2b51022acb382/t/66088d79b1e9b9435da0df3d/1711836538317/NickBarr_Loading_Screen.gif"/>
</div>

<style>
  @media screen and (max-width:767px) {
    .splash-wrapper img {
        content: url(https://static1.squarespace.com/static/5eb3110e12c2b51022acb382/t/66098f299f2dd00a3a22b62f/1711902506375/NickBarr_Loading_Mobile.gif);
    }
  }
  div#loader-container img {
    max-width:100%;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: black;
    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: 1s;
    animation-delay: 4.8s;
  }

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

 

Advanced (Overview page):

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://static1.squarespace.com/static/5eb3110e12c2b51022acb382/t/66088d79b1e9b9435da0df3d/1711836538317/NickBarr_Loading_Screen.gif"/>
</div>

<style>
  @media screen and (max-width:767px) {
    .splash-wrapper img {
        content: url(https://static1.squarespace.com/static/5eb3110e12c2b51022acb382/t/66098f299f2dd00a3a22b62f/1711902506375/NickBarr_Loading_Mobile.gif);
    }

 

Mobile.PNG

Link to comment

Made a few changes to the above but not much luck still, few issues.

1. I would like the GIF to display full screen on both desktop and mobile. I have one GIF for Desktop, and one for Mobile.

2. Mobile it is not full screen and not centre (down from the top) screen grab attached.

3. Anyway to have the scroll bar on the left not show when on the loading page? But appear once the loading screen has disappeared.

4. I only want loading screen to play once when someone visits the site, not on every page. Think I have fixed this. Though you have to reset cache to see it working.

Note: I have taken the code out of advanced, not having the Navigation Bar issue. Not sure code was supposed to be in there in the first place.

I have placed the code back on the site if you want to have a look.

www.nickbarr.co

Many thanks!

Link to comment

#1. You can remove this code

image.png.af1c36a25b8f581f7e2f8f5672ca518b.png

#2. Change 300px to 100%

image.png.af1aa4984750f99c59bb42de56d3e7d5.png

#3. I don't see this. Can you take a screenshot?

#4. Add this code under

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

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.