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:
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.
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.
User | RANK |
---|---|
37 | |
36 | |
17 | |
13 | |
9 |