I’m trying to add a scroll down animation to the hero banner of my website from this link Scroll Down Icon Animation (codepen.io)
I wanted to know where to add the code.
Topic summary
A user seeks to add a scroll-down animation to their hero banner on a Dawn theme Shopify store, referencing a CodePen example for the desired effect.
Proposed Solutions:
-
One respondent recommends hiring an expert if lacking technical experience, noting the code requires customization to work with the specific theme (slideshow.liquid file).
-
Another provides detailed implementation steps:
- Add HTML markup to
sections/image-banner.liquidwithin the banner__media div - Insert CSS animation code into
assets/base.css
- Add HTML markup to
Technical Details:
The solution includes CSS for a down-arrow element with:
- Absolute positioning (centered horizontally, positioned near bottom)
- Keyframe animation named “jumpInfinite” (1.5s duration, infinite loop)
- Arrow styling using border properties and rotation transform
Status: The discussion provides working code but remains open for implementation feedback. Screenshots are included showing exact code placement locations.
1 Like
You can add code to slideshow.liquid file of your theme but it is need customize the code to make it works with your theme. Recommend you hire an expert if you don’t have technical experience.
Hello @devanshvasant
- In your Shopify Admin go to online store > themes > actions > edit code
- Find sections > image-banner.liquid and paste this at the bottom of the banner__media media div:
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.down-arrow {
position: absolute;
top: calc(100vh - 280px);
left: calc(50% - 14px);
width: 0;
height: 30px;
border: 2px solid;
border-radius: 2px;
animation: jumpInfinite 1.5s infinite;
display: block!important;
z-index: 999999;
color: red;
}
.down-arrow:after {
content: " ";
position: absolute;
top: 12px;
left: -10px;
width: 16px;
height: 16px;
border-bottom: 4px solid;
border-right: 4px solid;
border-radius: 4px;
transform: rotateZ(45deg);
}
@keyframes jumpInfinite {
0% {
margin-top: 0;
}
50% {
margin-top: 20px;
}
100% {
margin-top: 0;
}
}
