Change background color based on website background color

Question

I'm trying to achieve a similar effect to the example below where the website's logo and menu icon change color depending on the background behind each element.

http://www.borngroup.com/work/dkny/

It looks like the change is made via javascript to each element's background color but I cant figure out how this is achieved.

Any help would be much appreciated!

Have you tried looking at the site's JavaScript? If it's not obfuscated you may be able to find out how they did it, although to me it looks like they just calculated the y position of certain elements on the page and checked if the scroll position is past it during onScroll() — Luke, May 25 '15 at 00:04
[This answer](http://stackoverflow.com/questions/29387084/get-average-outer-pixel-color-of-image/29387694#29387694) may help. — , May 25 '15 at 01:42

score 1 · Accepted Answer · answered May 25 '15 at 01:26

I don't know if this is what borngroup is doing, but you can accomplish this sort of effect using just css with background images and background-attachment: fixed.

Here's a quick demonstration.

body {
    height: 1000px;
}   

#one {
    background-color:black;
    background-image: url('http://d.pr/i/18pT3+');
    background-attachment: fixed;
    background-repeat: no-repeat;
    height:100px;
}

#two {
    background-color:yellow;
    background-image: url('http://d.pr/i/1capU+');
    background-attachment: fixed;
    background-repeat: no-repeat;   
    height:100px;
}

Change background color based on website background color

1 Answers1