Change Logo or color on scroll on each section

[ti-sign 2 Likes (Newbie)]

Hey there

 

This is one part demo and one part question.

 

I've been lurking in the forum for some weeks to get help and hopefully this can help somebody else (and someone may even make this better, probably).

 

I've been looking for a possibility to change my logo in the navbar depending on the color of the section it's on (because I have a transparent navbar). I didn't find a suitable solution so I created one on my own. If this is helpful to anyone with a similar problem, have fun!

 

You could even go further and check for the lightness in a hsl value to cover all colors (or the w and b in hwb).

 

However, here's my question. I have absolutely no idea if this is a performant or nice way to do it (I'm fairly new to JS and very new to GSAP). So if any of you pros out there see an immediate stupidity in my code, feel free to correct me 😄.

See the Pen NWzBLGQ by tisign (@tisign) on CodePen

[Carl 11,109 Likes (Superhero)]

Hi @ti-sign

 

Very nice of you to stop in and offer up this example. It's always interesting to see how folks approach challenges like this.

 

I really can't say there is anything wrong with what you did and certainly no "immediate stupidity" 😁

 

I came up with this approach in my lessons

 

See the Pen wvqjmQq?editors=0010 by snorkltv (@snorkltv) on CodePen

 

The short explanation is that I store the section and nav colors in separate arrays. If you open the demo in a new window and resize you'll see the height of the nav can change size and yet the nav color always changes exactly when a new section hits the bottom of the nav. 

 

Perhaps you or someone else will have fun experimenting with this technique as well.

 

As far as dynamically reading HSL colors to decide the appropriate nav color, that's not something that would come quickly to me, but it doesn't mean it isn't worth exploring further. Thanks again!

 

 

[ti-sign 2 Likes (Newbie)]

Hey @Carl

 

Thanks so much for the input! That looks really nice and I just learned that there is a thing called wrap, amazing 😃

 

My website always has a burger menu, so it doesn't change hight on resize (and it has no background color, so I need to change the logo to stay visible)

 

I've experimented a bit further myself and here is a solution that seems to work with reading out hsl values:

 

See the Pen OJEoyVx by tisign (@tisign) on CodePen

 

For anybody seeing this, I take no responsibility regarding efficiency (Not because of GSAP, I just don't know what I'm doing 😆), I myself am gonna use the color version, as I only use three colors on my site. Ouh, and it doesn't work without background color and/or transparent backgrounds.

 

[Carl 11,109 Likes (Superhero)]

Very nice!