How can I create animation/splash screen to appear only on the initial load when a visitors land on homepage

Site URL: https://jhuynhdesign.com

Dear Squarespace team,
On my website, I have set up a "splash screen", which is a GIF that animates off the page. I only want this animation to appear the first time the homepage is initially loaded.

My first problem was that this animation would appear anytime I tried to navigate to a new page on the website, but I then realized it was because I applied the code in the site wide code injector. I then removed it from there and injected it to just my "work" page, but it has a portfolio layout on the page. Which then leads to the animation being displayed every time a new project page is clicked on. 
Is there a way to just have it load on the first "work" page and not the corresponding project pages within it? Is there a better place to put the code and add additional code to have it play only once on the initial homepage load?

FYI to set up the splash screen, I currently use the code below injected into the advanced page settings of my "Work" page(which is the portfolio layout) .
thanks!
Jessica

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/604960c8e5cc251ac72ff9f5/t/60b741b47e6b260d3ca3fb2b/1622622645566/wordmark-transparent-final.gif" width="500" height="auto"></img>
    
</div>

<style>
.splash-wrapper{
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  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: 2s;
  animation-delay: 3.375s;
}

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

Hi. Try new code

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/604960c8e5cc251ac72ff9f5/t/60b741b47e6b260d3ca3fb2b/1622622645566/wordmark-transparent-final.gif" width="500" height="auto"/>
    
</div>

<style>
.view-list .splash-wrapper{
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  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: 2s;
  animation-delay: 3.375s;
}

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

@tuanphan Hi! I don't suppose you know how to achieve this if I want to set a non-linked page as the opening page, that loads to the homepage after a delay? I've created the page already, it has a scrolling marquee effect that i'd like to have when the user lands on the site for the first time. I've attached a video if you need to take a look. 

site: https://www.sundayservice.agency/ pw: sunday2021

This is the desired style I would like to achieve: https://www.lockstudios.co.uk/ 

Many thanks in advance! 

Nabil 

On 6/2/2021 at 3:58 AM, jhuynhdesign said:

Site URL: https://jhuynhdesign.com

Dear Squarespace team,
On my website, I have set up a "splash screen", which is a GIF that animates off the page. I only want this animation to appear the first time the homepage is initially loaded.

My first problem was that this animation would appear anytime I tried to navigate to a new page on the website, but I then realized it was because I applied the code in the site wide code injector. I then removed it from there and injected it to just my "work" page, but it has a portfolio layout on the page. Which then leads to the animation being displayed every time a new project page is clicked on. 
Is there a way to just have it load on the first "work" page and not the corresponding project pages within it? Is there a better place to put the code and add additional code to have it play only once on the initial homepage load?

FYI to set up the splash screen, I currently use the code below injected into the advanced page settings of my "Work" page(which is the portfolio layout) .
thanks!
Jessica

 

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/604960c8e5cc251ac72ff9f5/t/60b741b47e6b260d3ca3fb2b/1622622645566/wordmark-transparent-final.gif" width="500" height="auto"></img>
    
</div>

<style>
.splash-wrapper{
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  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: 2s;
  animation-delay: 3.375s;
}

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

There's a couple ways to go about this. I suggest you use Javascript to create an entry in the localStorage, sessionStorage, or a simple cookie. Then if this entry or cookie exists you don't display the GIF. This way the user will only see the GIF upon initial / 1st time page load until the user closes out of the session, clear cookies, etc.

Also, if you have AJAX enabled on your template you can detect if AJAX has been called. If it's been called then don't display the GIF. If you need help email me at nick@nickscola.com 

On 7/5/2021 at 3:05 AM, noblestudio said:

@tuanphan Hi! I don't suppose you know how to achieve this if I want to set a non-linked page as the opening page, that loads to the homepage after a delay? I've created the page already, it has a scrolling marquee effect that i'd like to have when the user lands on the site for the first time. I've attached a video if you need to take a look. 

site: https://www.sundayservice.agency/ pw: sunday2021

This is the desired style I would like to achieve: https://www.lockstudios.co.uk/ 

Many thanks in advance! 

Nabil 

@noblestudio Hiya, a bit late to this thread but was wondering if you managed to figure this out??? This is exactly what I want to do with my site by can't find out how anywhere! 

Thanks 🙂

On 10/2/2021 at 10:02 AM, HumDes94 said:

@noblestudio Hiya, a bit late to this thread but was wondering if you managed to figure this out??? This is exactly what I want to do with my site by can't find out how anywhere! 

Thanks 🙂

Hey @HumDes94 sorry about the late reply!

I got a coder to do this for me in the end! It's quite straight forward and didn't involve java. 

Have a good week! 😊

I have the code below on the home page to have the logo as splash screen. Now, I am looking at adding a pulse motion similar at this website: https://www.rebeccagracedesigns.com/

How can I achieve this please? https://www.creativeportrait.net.au/

Code:

<!-- loading image -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<script>
$(function() {
  var loadLogo = $('header').find('img').attr('src');
  $('.logoload').css('background-image', 'url(' + loadLogo + ')');
});
</script>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 200px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("fast");
})
</script>