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

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

Hi,

You mean show one time like this example? https://tuanphan3.squarespace.com/test-blurry-video?noredirect

pass: abc

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.

I sent wrong page, you can check this example: https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

pass: abc

yes, your example seems to work.  As long as it would load only once per day per visitor.

what code would i need to add to achieve this?

thanks for your help.

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>

@tuanphan Hi,

May I kindly ask if there is any possible way to create a splash screen OR landing page plus an ENTER button by using the below video for a website? and only load once if doesn't reload the browser.

The web link: https://gardenia-collie-ekrp.squarespace.com/

Splash screen on desktop: https://static1.squarespace.com/static/65099e4b0bacc94c32040af8/t/6654c936503f41361bd58f01/1716832574197/ALIG+-+Website+video_9_1920x1080.mp4

Splash screen on mobile:  https://static1.squarespace.com/static/65099e4b0bacc94c32040af8/t/6654c936d2a5c95ff33ea625/1716832579419/ALIG+-+Website+video_10_1080x1920.mp4

Many thanks in advance!!

On 5/28/2024 at 1:12 AM, caminada said:

@tuanphan Hi,

May I kindly ask if there is any possible way to create a splash screen OR landing page plus an ENTER button by using the below video for a website? and only load once if doesn't reload the browser.

The web link: https://gardenia-collie-ekrp.squarespace.com/

Splash screen on desktop: https://static1.squarespace.com/static/65099e4b0bacc94c32040af8/t/6654c936503f41361bd58f01/1716832574197/ALIG+-+Website+video_9_1920x1080.mp4

Splash screen on mobile:  https://static1.squarespace.com/static/65099e4b0bacc94c32040af8/t/6654c936d2a5c95ff33ea625/1716832579419/ALIG+-+Website+video_10_1080x1920.mp4

Many thanks in advance!!

 

Something like this? (I haven't adjusted mobile video yet)

https://tuanphan3.squarespace.com/video-loading-effect-desktop-mobile?noredirect

pass: abc

On 5/30/2024 at 12:34 PM, tuanphan said:

Something like this? (I haven't adjusted mobile video yet)

https://tuanphan3.squarespace.com/video-loading-effect-desktop-mobile?noredirect

pass: abc

dear @tuanphan

YES! and if could only load once per day if viewer doesn't clean the browser data?

After video played ONE TIME FULL if could fades out to the home page? instead of hiding to left.

Last question is if can put a white close button X on top right in case anyone wants to click it away

GREAT THANKS!

On 5/30/2024 at 12:34 PM, tuanphan said:

Something like this? (I haven't adjusted mobile video yet)

https://tuanphan3.squarespace.com/video-loading-effect-desktop-mobile?noredirect

pass: abc

dear @tuanphan

May I ask how to install the same as you did? it looks already great!

Code I used in the demo (Page Header Code Injection). The code will show.

You can add code to Site wide Code Injection > Footer, so when users access homepage > video will appear >> it disappear and homepage appear

<div class="splash-wrapper" id="loader-container">
  <video autoplay loop muted>
  <source src="https://static1.squarespace.com/static/65099e4b0bacc94c32040af8/t/6654c936503f41361bd58f01/1716832574197/ALIG+-+Website+video_9_1920x1080.mp4" type="video/mp4">
</video>

</div>
<style>
.splash-wrapper {
  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:.65s;
  animation-delay: 15s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -200vw;}
}
</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>

On 6/5/2024 at 6:13 AM, tuanphan said:

Code I used in the demo (Page Header Code Injection). The code will show.

You can add code to Site wide Code Injection > Footer, so when users access homepage > video will appear >> it disappear and homepage appear

<div class="splash-wrapper" id="loader-container">
  <video autoplay loop muted>
  <source src="https://static1.squarespace.com/static/65099e4b0bacc94c32040af8/t/6654c936503f41361bd58f01/1716832574197/ALIG+-+Website+video_9_1920x1080.mp4" type="video/mp4">
</video>

</div>
<style>
.splash-wrapper {
  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:.65s;
  animation-delay: 15s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -200vw;}
}
</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>

 

@tuanphan How did you get the static1 video source for your upload? This is the last thing I need to get it working on my site:

citicoregroup.squarespace.com
Password: citicore

On 10/11/2024 at 6:16 PM, ChrisAita said:

@tuanphan How did you get the static1 video source for your upload? This is the last thing I need to get it working on my site:

citicoregroup.squarespace.com
Password: citicore

Just add a text box (anywhere) > type a text > highlight it > click Link icon > Upload video as a file >> After upload, you will have a video will url like this

https://citicoregroup.squarespace.com/s/mountain.mp4

with mountain.mp4 is your video 

On 10/12/2024 at 11:53 PM, tuanphan said:

Just add a text box (anywhere) > type a text > highlight it > click Link icon > Upload video as a file >> After upload, you will have a video will url like this

https://citicoregroup.squarespace.com/s/mountain.mp4

with mountain.mp4 is your video 

That worked wonders, thank you @tuanphan!

I noticed on Mobile that the video doesn't appear and the transition doesn't seem to happen, I need to refresh the page in order to see the site. I know you were saying before that the code was not mobile adjusted, has that been updated/changed since?

On 10/14/2024 at 8:44 PM, ChrisAita said:

That worked wonders, thank you @tuanphan!

I noticed on Mobile that the video doesn't appear and the transition doesn't seem to happen, I need to refresh the page in order to see the site. I know you were saying before that the code was not mobile adjusted, has that been updated/changed since?

I'm not sure why, but video tag disappear completely on mobile of your site

You can consider adding an image on mobile instead, if you want this, I will give extra code

7 hours ago, tuanphan said:

I'm not sure why, but video tag disappear completely on mobile of your site

You can consider adding an image on mobile instead, if you want this, I will give extra code

I'd appreciate that @tuanphan, a workaround I thought of would be to use a GIF of the animation for mobile instead. If that would still work with the code you'd make then that's awesome.

On 10/16/2024 at 6:17 PM, ChrisAita said:

I'd appreciate that @tuanphan, a workaround I thought of would be to use a GIF of the animation for mobile instead. If that would still work with the code you'd make then that's awesome.

You can provide code you added + send gif file, I will test on my site then give you final code