How do I dynamically change nav link text color based on background brightness?

27 views Asked by At

Admittedly not a developer, but trying to learn my way through customizing a Squarespace site for myself.

I was looking to implement some code that updates the color of my nav links based on the content that exists behind them at any given point as the user scrolls (or as the full-bleed hero carousel cycles between content). Background content could be anything really: light color blocks, dark color blocks, imagery, video, etc...

Open to any ways you feel would work! Not looking to simply use the 'difference' CSS property either fwiw, would prefer that the link text color cycles only between black and white.

Thanks in advance for your help!

I was trying to follow the suggested answer in this thread, but when I implement the code on my site it just keeps setting the background color on the element and then randomizes that color on a timer (to credit the poster, the text does change the way I'd like it to though!). Ideally I would be able to simply detect the background brightness of the nav items' container, and then set the color of the nav link text accordingly, if that makes sense?

0

There are 0 answers