Fade In/Fade Out Animation While Scrolling

Store Design
, , ,
1

I am trying to figure out how to get this animation of when scrolling down, the header background fades white and texts fade black, and when scrolled all the way back to the top, the header fades transparent and the text turns white. The logo also fades from white to black or vice versa. Is it possible to currently do this with shopify? I was able to get my header to be transparent but on Dawn 8.0.0. The shopify community forum even implemented this, can anybody help me out how to implement this in my new store on 9.0.0 if possible? Thank you!

My Site: https://benjalletwallets.myshopify.com/

2

Hi @kevin235 , for me the following code worked on Dawn 8, hope it helps

.list-menu__item {
color: white;
transition: color 0.5s ease-in-out;
}
.header.scrolled .list-menu__item {
color: black;
transition: color 0.5s ease-in-out;
}

.header__icon {
color: white;
transition: color 0.5s ease-in-out;
}
.header.scrolled .header__icon {
color: black;
transition: color 0.5s ease-in-out;
}
.header-wrapper {
width: 100vw;
}

3

Thank you AnnaBe. Which file and line am I exactly supposed to insert this code?

4

@kevin235 add in base.css file (Online store->themes->Edit code->Assets->base.css)

5

Hi, i implemented this code on top of the header.liquid and it would be ok on bottom of your base.css too