Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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 |
---|---|
40 | |
37 | |
30 | |
15 | |
12 |