Jump to content

Help with css code for having animated gif at landing page show once per visitor per day.

Recommended Posts

Hi, by no means do I know anything about code.  I have however installed a lot on my website (www.spectrumnrg.com) that I've either purchased or watched tutorials on.  One particular code I purchased shows an animated gif when a visitor first lands at my homepage.  The issue is, it keeps on loading every time someone goes to the landing page, once again, www.spectrmnrg.com.  It's annoying to say the least, even for me.

Is there a line of css code that I could ad in order to only show the landing page animation once per visitor, either once per day per unique visitor or only until the visitor clears their cookies?

Thanks for lending a hand.

CRM

Link to comment
  • Replies 5
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Thanks for helping out.  In your example, I would only want to see the the black screen with "page animation 1" only one time.  When I refresh your page, I keep on seeing the black screen.

On my site, I'm trying to show the white animation that says "Welcome to Spectrum Energy" only once per day per visitor.  As of now, anytime a visitor goes back to the home page or if they visit my site more than once per day, they will see the loading animation, which is annoying.

Link to comment
  • 4 weeks later...

Code I used on page

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

 

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.