Highlighted

Change logo from white to black as user scrolls page?

New Here ,
Jul 22, 2020

Copy link to clipboard

Copied

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!!!! 🙂

Views

57

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Change logo from white to black as user scrolls page?

New Here ,
Jul 22, 2020

Copy link to clipboard

Copied

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!!!! 🙂

Views

58

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 22, 2020 0
Adobe Community Professional ,
Aug 13, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 1
New Here ,
Aug 13, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0
Adobe Community Professional ,
Aug 14, 2020

Copy link to clipboard

Copied

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. 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2020 1