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.
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023