lundi 24 août 2020

How to dynamically change text color of transparent fixed navigation bar depending on color beneath text? (html, css, jquery)

I am doing a small webdesign project for myself right now.

Here is what I can't get working:

I have a navigation bar that is fixed on the top of my page. This bar is transparent (actually it is a backdrop filter). Now I want the navigationbars text to invert the color (either white or black) depending on what (average) color is displayed beneath that text.

How would you accomplish this?

I tried with getting the average color of the top e.g. 60pixels of the viewport. But I can't get this to work.

Any other ideas?

Thank you in advance!

part of my structure:

<style>
    topNavBar {
       overflow: hidden;
       position: fixed;
       backdrop-filter: blur(10px);
    }
</style>

<body>
    <div class="navbar">
        <a href="#home">Home</a>
    </div>
</body>



Aucun commentaire:

Enregistrer un commentaire