Jump to content

Time-delay appearance of buttons on cover page

Recommended 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% {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

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

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 comment
  • 6 months later...
  • 2 weeks later...
  • 5 months later...
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
  • 11 months later...

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!

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.