Jump to content

Intro Video / Animated logo

Recommended Posts

Site URL: https://octagon-garlic-ejcr.squarespace.com/

Hello friends,


I was wondering if it was possible to have an intro video that will enable before accessing directly to the main website page. 

So basically when people enter my website : 


1/ An animated logo launch
2/ At the end of the logo, the website unfolds. 

Also was wondering what size is usually recommended for this kind of intro. 

Thanks !


 

 

Link to comment

Add to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 90px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5db97e10780a6c1bc1b16e3e/1572427397438/?format=1500w");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

Replace with your logo url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, Satori2046 said:

Hey Tuanphan, 


Thanks again for your precious help, so your code works perfectly with a picture or a gif image. 

But is it possible with a video file  ?

Cheers !

You can convert video to gif

Will take time to check code for video, and it's outside the free support range at the forum.

You can also post this to some groups at the link in my signature, hoping someone will have the code.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 2 years later...

Use this code, if you want to use video

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<video class="logoload">
	<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<style>
.logoload {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
On 6/13/2023 at 8:27 PM, newisnice said:

how do you set your image in this code?  where do I get my image URL?

Thanks!

 

 

Suppose image name is mountain.png

and your site is: newins.squarespace.com

You can follow this guide to upload image 

https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

then the image url will be: https://newins.squarespace.com/s/mountain.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 10/22/2023 at 7:09 PM, jrosenblum91 said:

I've inserted the code with a link to the mp4, but get a white page that briefly appears before the homepage loads. Any idea why the video is not showing? 

Can you share link to your site? We can check problem easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.