3

So I have a fixed transparent header menu on a website with full width/height images that are black & white photos. I'm wondering if there is a way (either with pure CSS or with some sort of JS implementation) to always have the menu text's color be the opposite of the color of the background at whatever scroll position I'm in. Basically, these photos change from very light to very dark at different places, so as you scroll, the menu is very hard to see for most of the scroll if I make it always white or always black.

Is there a way to implement this?

AKor
  • 8,550
  • 27
  • 82
  • 136
  • Are the images hardcoded/static or are they alway changing? – Jeff Oct 19 '16 at 16:28
  • Yes. There is probably a way to implement the expected result. Can you include `html` and what you have tried to solve issue at Question? – guest271314 Oct 19 '16 at 16:29
  • @Jeff They will be changing on a regular basis, otherwise I'd do some hacky implementation where the scroll distance changes the color or something. – AKor Oct 19 '16 at 16:30
  • @guest271314 I haven't looked into anything workable yet, I wanted to see where to start (whether with CSS or JS). I haven't found any solutions online that can work with any background (the solutions have the background provided initially). – AKor Oct 19 '16 at 16:31
  • @AKor, had they been the same that would have been the best way. – Jeff Oct 19 '16 at 16:31
  • You can try using CSS filter - invert might help you here. – Selvam Elumalai Oct 19 '16 at 16:34

2 Answers2

3

Would mix-blend-mode be an option? ... has not the best browser support yet though

body {
  background: url(http://farm4.staticflickr.com/3694/8959572838_57fa40bdb4_c.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

div {
  font-size: 140px;
  text-align: center;
  color: white;
  mix-blend-mode: exclusion;
}
<div>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
</div>

Added a black-and-white sample

body {
  background: url(https://i.stack.imgur.com/8rKUn.png) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

div {
  font-size: 140px;
  text-align: center;
  color: white;
  mix-blend-mode: exclusion;
}
<div>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
  Hey there<br>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • That's EXACTLY what I'm looking for. Oddly enough, I can't seem to have it work correctly on my page. Regardless of background, adding the mix-blend-mode rule will cause the text to just go from all black to all light grey no matter what. I'm applying the rule to the
    containing the text, as you are.
     – AKor Oct 19 '16 at 17:04
  • @AKor What if you use a color image, as in my sample? – Asons Oct 19 '16 at 17:07
  • @AKor Added a 2:nd sample with a black-and-white image to make sure nothing goofy was going on with those – Asons Oct 19 '16 at 17:17
  • Ah ok, it was because I was using Chrome and it only seems to work for me in Safari. In your first example, there was some JSON-looking code in the bottom, and the exclusion effect worked perfectly on that text (not sure if this was intended or not) but not on the image itself (in Chrome). – AKor Oct 19 '16 at 17:24
  • @AKor Can't see any JSON-looking code? ... I use Chrome for Windows and both above sample work great – Asons Oct 19 '16 at 17:28
  • 1
    @AKor That is the built in console app in SO snippets that for some reason errors, and it has nothing to do with my sample though might make my code error too. I turned that off in above 2 samples and also made a fiddle: https://jsfiddle.net/86svh8t7/ – Asons Oct 19 '16 at 18:20
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126155/discussion-between-akor-and-lgson). – AKor Oct 19 '16 at 18:27
2

tl;dr : yes there is.

...

If I would need to implement this, this is the thought process I would have, so maybe you need to split up your question into subquestions and search for those:

css cannot inspect, javascript can. So step one is look into a Javascript solution.

Then the next question to answer is how to colorpick any point on a position on a page: Get pixel color from canvas, on mouseover. pretty cool jsfiddle from that question, check it out.

And the next question to answer is how to pick the 'opposite color' (always a fun programming exercise): JS function to calculate complementary colour?

the next question to answer is, when to call this update function (on scroll), it's fairly straight forward, you'd find many tutorials for that.

And the last step is apply that color code to the elements' style you want to update. which I assume is not really what you are questioning now.

good luck!

Community
  • 1
  • 1
morksinaanab
  • 682
  • 7
  • 20
  • Looking into this a bit more, some hesitations: 1. can you somehow get the color of any point in the html page without it being canvas? (not sure yet, maybe you can make a snapshot of the page and put it in canvas, and get the image date). 2. it's a pretty expensive operation, so make sure to make the scroll check interval not too often. (an alternative is, if you know the images you're showing, to calculate it server side with GD lib or something and adjust the css based on the server side calculations already) – morksinaanab Oct 19 '16 at 17:00
  • some ideas about html -> canvas http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots – morksinaanab Oct 19 '16 at 17:01