Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
codefordummies

Time-delay appearance of buttons on cover page

Recommended Posts

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!

Edited by codefordummies

Share this post


Link to post

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.

 

 

image.thumb.png.ce0e1746bfed743901cb6eee9b8a8700.png

Edited by colin.irwin

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

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 🙂 

Edited by codefordummies

Share this post


Link to post

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

 I have tweaked the code above, please try again. 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...