Fade in Banner on page loading

DanCarroll
New Member
1 0 0

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
3419 224 657

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.

Join the discussion - What was learned this Black Friday?


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

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

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com