Time-delay appearance of buttons on cover page

Hi guys,

I currently have a cover page for my site that displays a video. I want to be able to time delay the text/buttons that appears on the cover page. Does anyone have an idea on how I can do that?

Thanks!

The following css should be added to the Advanced tab of your cover page settings. 

<style>
.sqs-slice-buttons {
  animation: fade-me-in 3s;
}

@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}
<style>

There are 2 sections to the code. 

In the first section you set the total length of the fade in, from invisible to fully visible. It is set to 3 seconds above but you can change it. 

In the second section you can define how long the buttons stay invisible before they start to fade in. In the example it is set so that the buttons remain invisible for 80% of the3s animation duration (2.4s invisible) and then fades in over the remaining 0.6s.

Hi colin.irwin, thanks so much for your answer. For some reason the whole screen is going white? Do you know what can be causing this to happen? I wanted the buttons to fade in after 15seconds so I modified the code you gave me originally but everything goes blank.

Also is there a way to do the same for the title and description?

Thanks 🙂 

Can you share your modified code?

Here it is, I just changed the seconds...?

It looks like the syntax highlighting on this forum also strips the / from tags. 

 I have tweaked the code above, please try again. 

It does the same thing... 😕

On 10/27/2019 at 1:48 PM, codefordummies said:

It does the same thing... 😕

Hey codefordummies

I face the same issue. Did you find a solution so far?
Best regards,

Friederike

Hey! 

I was just wondering if this type of code can be applied to the custom CSS page and not just for cover pages. I only want the code to work for one page. 

Cheers, 

Isak

On 11/4/2020 at 5:15 PM, isak said:

Hey! 

I was just wondering if this type of code can be applied to the custom CSS page and not just for cover pages. I only want the code to work for one page. 

Cheers, 

Isak

You can add to Page Header

Ok guys I’m having trouble here trying to figure how to have a video on landing page as a intro I kinda got it but.... I got no sound and I want it to play as a full screen when it auto plays like if you open a mp4 file and play a video it’s only 6 sec long 

Does this code injection still work with the new squarespace update? I'm creating a cover page (there's no longer the cover page option, just using the blank page and used a code injection to remove the header and footer) that has a background video play and I want the enter the site button to fade in after the video ends. I tried adding this above code and changing the timing to my desired length but it doesn't seem to be applying (the button remains visible from the start). Any tips? Thanks!

On 11/5/2020 at 4:34 AM, tuanphan said:

You can add to Page Header

I tried this with the "Read On" button here without success. Any suggestions?  

On 5/3/2023 at 9:35 AM, handyandmarvelous said:

I tried this with the "Read On" button here without success. Any suggestions?  

Use this code

<style>
.button-block a {
  animation: fade-me-in 3s;
}

@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}
<style>