Can I make my homepage banner fade in on page load?

Technical Q&A
1

Hi all,

I’m developing my online store right now and was hoping to have my hero banner fade in after a second or two when first arriving on the homepage. Does anyone know if this is possible? For context:

Screenshot 2021-11-13 170309.jpg
Screenshot 2021-11-13 170309.jpg1914×830 145 KB

So I would essentially want the site to show as whitespace for a second before the image fades in. I am using the Debut theme currently and the hero banner is currently an Image with text overlay. Any help would be greatly appreciated.

2

Roughly add the following as a style to the theme files or as a custom html/block if applicable.

#shopify-section-hero , . fade-in {
  animation: fade-in 5s;
}
@keyframes fade-in {
  0% {opacity:0;}
  100% {opacity:1;}
}

Or to have it hidden until javascript loads make an onload handler and apply a fade-in class to the #shopify-section-hero element .

Milage may vary greatly when using slideshows, most slider libs have a transition option/function.