Dynamic colour change header menu

I am currently working on a website (7.1 blank template) where I am looking for that the header navigation links to change depending on the image that they scroll over (so for example on a light image we would like the text to be black, but as soon as the image is darker for the font to change to white).

I have been trying to solve this with css only :

/* Nav item color */

.header-nav-item a{

  color: transparent;

  filter: invert(1) grayscale(1) contrast(9);

}

Or with the color-Blend mode:

/* Nav item color */

.header-nav-item a{

  color: white !important;

  mix-blend-mode: multiply;

}

Any help would be appreciated.

On 9/13/2021 at 3:53 PM, Rik_Nvgtr said:

I am currently working on a website (7.1 blank template) where I am looking for that the header navigation links to change depending on the image that they scroll over (so for example on a light image we would like the text to be black, but as soon as the image is darker for the font to change to white).

 

I have been trying to solve this with css only :

/* Nav item color */

.header-nav-item a{

  color: transparent;

  filter: invert(1) grayscale(1) contrast(9);

}

 

Or with the color-Blend mode:

/* Nav item color */

.header-nav-item a{

  color: white !important;

  mix-blend-mode: multiply;

}

 

Any help would be appreciated.

 

 

It may need javascript to detect the scroll position and extract the image's lumiance to change the nav color accordingly, rough plan should be

- Intersection Observer to detect scroll position

- Library such as Vibrant.js - Extract prominent colors from an image. (jariz.github.io)