Change color of logo depending on which slider image is active

Question

I'm using Revolution Slider with a number of light and dark images. My logo image appears on top of the image slider. When the slider is showing a dark image, I'd like my logo image to show a light version; when the slider is showing a light image, I'd like my logo to be dark.

Here are two examples of websites that have achieved this, though I'm still unsure how:

http://vankarwai.com/themes/lobo-agency/ http://pixelgrade.com/demos/pile/

What do you think is the best way to achieve this?

Thanks! Lauren

I tried following vivek's solution, but the text isn't changing color on scroll like it should be. Any ideas? http://jsfiddle.net/tvuppu4w/4 — Lauren, Nov 16 '14 at 03:07

score 1 · Answer 1 · answered Nov 08 '14 at 12:12

You can use this plugin: http://www.kennethcachia.com/background-check/index.html

Code Sample:

BackgroundCheck.init({
  targets: '.check',
  images: '.images'
});

Make the logo container use "check" class and make the slider images use "images" class. The plugin will check for the brightness of images with "images" class and append "background--light" or "background--dark" class to elements with "check" class automatically.

You can change the logo image using the some css like this:

.check.background--light {
  background: url(logo-black.png); 
}

.check.background--dark {
  background: url(logo-white.png);
}

This looks great! I'm having some trouble implementing it, though... any idea what I'm doing wrong? http://jsfiddle.net/tvuppu4w/4/ — Lauren, Nov 10 '14 at 12:13

score 1 · Answer 2 · answered Nov 08 '14 at 12:17

in each li tag add attribute data-color (white or black)

<li data-color="white" data-transition="fade" data-slotamount="5" data-masterspeed="700"   >

add onchange event

jQuery(document).ready(function() {

   revapi = jQuery('.tp-banner').revolution(
    {
        delay:9000,
        startwidth:1170,
        startheight:500,
        hideThumbs:10

    });


    revapi.bind("revolution.slide.onchange",function (e,data) {
        color=$(this).find('li').eq(data.slideIndex-1).data('color');

    if(color=='black') {// swap logo to black}
    if(color=='white') {// swap logo to white}

    });

Change color of logo depending on which slider image is active

2 Answers2