Jump to content

Pre-loader Screen with Video Background

Go to solution Solved by SunroofDigital,

Recommended Posts

Looking for a solution. I would like to create a pre-loader that has an .mp4 as a background. 

I essentially need to re-create this website in Squarespace: https://www.perspectivehelm.com.au/

This is my site: https://panda-helix-pl7x.squarespace.com/ pw: kmedia

I've pasted the code I am using right now for the preloader transition at the bottom of this message. I am happy with everything except, instead of .loading-screen having a background colour of #06222F, I would like it to use this video file as the background: https://static1.squarespace.com/static/666256b00af66633b64c130a/t/6666977b0705a0295313bcff/1717999515306/hero.mp4

CSS CODE I USED: 

/* Animated Loading Screen BACKGROUND */
.loading-screen {
  animation: fadeOutBackground 1s forwards 4s ease-in-out; /* Delayed fade out */
  background-color: #06222F;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
}

/* Animated Loading Screen LOGO */
.loading-screen-image {
  animation: fadeInOut 3s forwards 1s; /* Start after 1s delay */
  background-image: url(https://static1.squarespace.com/static/666256b00af66633b64c130a/t/66669af96b227110efeca9de/1718000377395/logo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 800px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  opacity: 0; /* Ensure it's hidden initially */
}

/* Animation Loading Screen LOGO FADE */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Animation Loading Screen BACKGROUND FADE OUT */
@keyframes fadeOutBackground {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Link to comment
  • Replies 1
  • Views 145
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution
Posted (edited)

Update - I've figured out a workaround. The preloader animation needs to be added to the Code Injection section of the site NOT the Custom CSS..

In the Code Injection you're free to use a combination of HTML and CSS which solved my issue and allowed me to host an .mp4 file as the background image on the preload animation.

 

Edited by SunroofDigital
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.