Jump to content

Trouble creating splash Screen

Recommended Posts

Site URL: https://fife-buttercup-rzmj.squarespace.com/config/pages

Hi 

I am trying to create a splash screen with the company logo and although I added all the code it didn't work for me. I don't know if I am doing something wrong. 

I used this code: 

.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;}
}

 

 

I watched this tutorial to do this that is very good but it didn't work for me: 

 

Thanks a lot 

Barbara

 

Untitled-6.jpg

Link to comment
  • Replies 4
  • Views 282
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

The loading screen on the home page, it loads before the home page shows up. It show load the company logo before the homepage.

I tried another code now  but it didn't work well. When I write the code that I sent before the loading screen looks like the attached photo that I sent a few messages before. It is behind the logo, the background is not white. Basically all the steps I followed from the tutorial that I sent didn't work. 

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.