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

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
Link to post
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

Can you share your modified code?

It looks like the syntax highlighting on this forum also strips the / from tags.   I have tweaked the code above, please try again. 

Posted Images

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

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
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

Link to post
  • 6 months later...
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

Link to post
  • 2 weeks later...
  • 5 months later...

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

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...