Jump to content

Custom Splash Page

Recommended Posts

Site URL: https://www.itchmedia.co.uk/

Hiya There! 

Im hoping someone can help me. I am trying to create the same effect seen on the above websites splash page when you first enter the site. I have managed to create a slideout animation with the GIF logo but I cant figure out how to have the one colour background reveal the second colour background and then reveal the site below. 

 

Any help would be brill! Thanks. 

I have so far used the following code to get the single colour working... 

<div class="splash-wrapper1">
  
   <img src="https://images.squarespace-cdn.com/content/v1/6277b6f9e21a2113e15ccf75/a62a6523-8209-4444-a2f9-0cbb0b8b0a4d/ezgif.com-gif-maker.gif?format=2500w" width="500" height="auto" loop="false">
    
</div>

<style>
.splash-wrapper1 {
position: fixed;
z-index: 9999;
background-color: #F6F6F6;
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: 3s;
}

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

Link to comment
  • Replies 0
  • Views 194
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

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.