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.
New Feature: Automatic free shipping discounts
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Defeat problems ,Learn To Ask Questions The Smart Way
User | RANK |
---|---|
25 | |
22 | |
9 | |
6 | |
6 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023