Liquid, JavaScript, themes, sales channels
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 |
---|---|
12 | |
10 | |
7 | |
7 | |
6 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022