Jump to content

Website Entry Animation

Recommended Posts

Posted

Hi, I'm trying to set up my website where when someone clicks the link, it opens with a curtain effect showing my logo in the centre, and then closes and fades to show my actual homepage.

This is the website I got the idea from https://www.platinumplush.shop. However, their's only works if you open it on a phone.

Does anyone know a code I can use for this? It would be so great.

  • 2 weeks later...
  • Replies 9
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 years later...
Posted
On 9/20/2023 at 4:51 PM, tomasgf said:

URL: https://gallery.obra.se

SS: 7.1

Yes. Possible. This week I solved 2 cases. Which code will you use? Above code or another code? If another code, can you send it? I can tweak it 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
2 hours ago, tuanphan said:

Yes. Possible. This week I solved 2 cases. Which code will you use? Above code or another code? If another code, can you send it? I can tweak it easier

Thanks for your answer!

Well, I suppose I would use the code you suggest since I don't have any other than the one you posted above. That one plays the animation over and over when one navigates through different pages in the same session.   

Ideally, if possible, the animation would play only to introduce the first page visited in one given session instead of loading with every page visited in that same session. 

With kind regards,

Tomás

Posted
On 9/22/2023 at 6:34 PM, tomasgf said:

Thanks for your answer!

Well, I suppose I would use the code you suggest since I don't have any other than the one you posted above. That one plays the animation over and over when one navigates through different pages in the same session.   

Ideally, if possible, the animation would play only to introduce the first page visited in one given session instead of loading with every page visited in that same session. 

With kind regards,

Tomás

I did a quick example, you try checking

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

abc

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 9/25/2023 at 9:43 PM, tomasgf said:

Looks pretty good to me!

You can add this code to Settings > Developer Tools > Code Injection > Footer. Replace example image url with your new image url

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
  <img src="https://static1.squarespace.com/static/6324583db82aa04037d1426a/t/650d59831ee8c8147f63d9f7/1695373699487/Untitled-5.png/s/your-favicon.ico"/>
</div>

<style>
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color:#fff;
    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: 1s;
    top: 0;
    left:0;
  }

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

 

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

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.