Fade in Banner on page loading

DanCarroll
Visitor
3 0 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

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.

 

Reply 1 (1)
PaulNewton
Shopify Partner
5516 500 1132

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.

New Feature: Automatic free shipping discounts


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Defeat problems ,Learn To Ask Questions The Smart Way