Jump to content

loadinf screen personalized

Recommended Posts

Hello i want to make for this page a loading introduction JUST for my homepage. my inspiration is this https://www.jackdavison.co.uk 

I got this codes and i was wondering two things 

1- is there a way i can ad my loading for it to scroll up when it eds 

2- I want it to appear just on my loading screen introduction not for every page. 

 

ill share the codes here if you could help me i would really appreciate it 

CODE INJECTION HEADER 

 <div class="loadingscreen">
      <span class="loading"><span class="loader-inner"><img class="logo-pulse" src="https://static1.squarespace.com/static/664d36ff1a5c8a242694306d/t/668f123f1005243876af0f16/1720652351935/A+Celebrar+la+vida+a+celebrar+el+amor.png" alt="A Celebrar la vida, a celebrar el amor T"></span></span>
 </div>

CODE FOOTER

<script>
   document.body.classList.add("stop-scrolling");
    window.onload = function() {
      document.body.classList.remove("stop-scrolling"); 
      document.getElementById("header").style.visibility = "visible";
      document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none");
    };
</script>

CSS

.stop-scrolling { 
    height: 100%; 
    overflow: hidden; 

#header {
  visibility: hidden;
}

.loadingscreen {
  position: absolute;
  background: #000000;
  opacity: 1;
  z-index: 2000;
  width: 100%;
}

.loadingscreen > .loading {
  background: #000000;  
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: left;
  
}

.loading img {
   height: auto;
   width: 200px;
}

.logo-pulse{
    animation-name: slideide;
    -webkit-animation-name: pulse;    

    animation-duration: 1.5s;    
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;        
    }
    50% {
        transform: scale(1);
        opacity: 1;    
    }    
    100% {
        transform: scale(0.9);
        opacity: 0.7;    
    }            
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;        
    }
    50% {
        -webkit-transform: scale(1);
        opacity: 1;    
    }    
    100% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;    
    }            
}

 

 

 

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.