How to change text color on background change?

Question

I want it so that either on a slider or scroll down over differently colored backgrounds, the text logo would change to be readable over the background. I imagine this could be done by finding the dominant image color, but this would be slow and seems overkill. Is there an alternative?

Some effects I saw in the wild:

https://home.google.com/ (Wait for image to change)
http://www.acnestudios.com/us/en/home

Would the best way to do this (for a slider) just to make an array of colors on each slide?

Have a look at this plugin, this might be useful: http://www.kennethcachia.com/background-check/ — Wim Mertens, Oct 03 '16 at 03:27

score 1 · Answer 1 · answered Oct 03 '16 at 03:22

The way that Google Home work is, change the class of the main div on the slider change event so that it can change the color of the text also. It already pre defined the color of the text according to the color of the image and i think it is the best way for your case. You can reduce a lot of calculation and can adjust the color of the text easily.

score 0 · Answer 2 · answered Oct 03 '16 at 04:28

I don't know exacly what do you mean, but if you want to change anything of html dom when you are scrolled bottom of the page, You must write your javascript code for jquery scoll event if you are using scroll page

$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled to bottom of the page
   //type executing statement here
}
});

score -1 · Answer 3 · edited May 23 '17 at 12:06

$(document).ready(function(){       
    var scroll_pos = 0;
    $(document).scroll(function() { 
        scroll_pos = $(this).scrollTop();
        if(scroll_pos > 210) {
            $("body").css('background-color', 'blue');
        } else {
            $("body").css('background-color', 'red');
        }
    });
});

Some resources to animate the background colors( make some transition between then). Here

How to change text color on background change?

3 Answers3