Change logo from white to black as user scrolls page?

Forum|Forum|6 years ago
July 22, 2020
3 replies
554 views

Hi there!

Have seen this effect on many websites - I have my logo in white in the top left of my design which I want to have fixed in place. However, I need it to change to black when scrolling over whitespace/certain images further down the page. Can this be achieved in XD? Here's an example of what I'm trying to achieve: https://exoape.com/work/rino-pelle/

Thanks in advance!!!! 🙂

This topic has been closed for replies.

Ares Hovhannesyan

Community Expert

You can use two artboard. One with color icon ahother one with black. Changing artboard will change color of logo. Or use Hover Effects foe States of the button.

TOBDAJOAuthor

Participant

Thanks Ares! Could you go into a little more detail for me? I'm a beginner. What would I need to do in Prototype mode / in the animations panel? Do I need to select overlay? It is just my fixed white logo i am concerened with, when it passes over images/white backgrounds further down my page.

Ares Hovhannesyan

Community Expert

In 90's when we are building html pages we are creating two different html's where we are putting color logo and on the another black7white. So you have to do the same thing. Export from Ps two different files. (color and B&W images for the same logo.)

1.Create one artboard. Place color image.

2. Dubplicate that artboard.

3 Replace color image with Black&white on the same location.

4 Add transition between this two artboard; Trigger the transiton action on cliking on artboard or any object.

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.