Dynamically Changing Logo/Nav Colour

Design help Animations & Interactions
1

Hi all,

Not sure if anyone is familiar with javascript that knows how to make this happen?

I have a slider as my hero section that scrolls through portfolio projects. I need my logo and menu button to invert between black and white based on the background colour, in order to ensure visibility on every slide. A great example of this is on https://pentagram.com where the nav inverts based on the current carousel slide. The hard part is, my slides will change quite often, so it needs to detect in real time whether the background is light or dark.

I found this amazing plugin that does exactly this, but I have no idea how to implement it on my site. (Github: GitHub - kennethcachia/background-check: Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.)

Is there anyone who could help with this?

Thanks very much!

2 Likes
2

Hey Sean, you could also try solving this with some CSS.
Might not do exactly what you want but give it a try:

.yourlogo {
mix-blend-mode: exclusion;
}

This will also change the color based on the background. It might look a bit trippy, but give it a go :slight_smile:

Here’s more information about it: mix-blend-mode | CSS-Tricks - CSS-Tricks

If you still want to do it more like you have described, you could probably do it without custom JS. Just have two logos on top of each other (a black and a white one), and change the opacity of one to 0%. Now create some interactions based on when another element enters the viewport. As soon as that happens, change the visible logo to 0% and the other one to 100%. Might do the trick!

3

Hi All! I actually found a solution that works flawlessly! After a lot of searching I found this JS fiddle that did exactly what I wanted. Because the carousel slides shuffle in order and have new content every so often, I needed the nav to change colours dynamically. In case anyone else is trying to do the same, the instructions are as follows:

Step 1
Create a toggle in the CMS Collection Settings (“White” or “Black” Navbar)

Screen Shot 2020-10-14 at 5.19.18 PM

Step 2
Put an invisible element (i.e. with height=0px) in the CMS collection item (which is in the slider). Add conditional visibility to that invisible element, in which the element is ONLY displayed if the toggle is set to “White”.

Screen Shot 2020-10-14 at 5.21.29 PM

Step 3

Add the jQuery script below into the " Before " custom code section of your page. IMPORTANT: replace “.navwhite” with the class name of your invisible element, and replace “#main-header” with the ID of your navbar.

<script>
$.fn.is_on_screen = function(){
     
    var win = $(window);
     
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
     
    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
     
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom <= bounds.top || viewport.top >= bounds.bottom));
     
};

function isTargetVisble() {
    var retunVal = false;
    $('.navwhite').each(function() {
        if( $(this).is_on_screen() ) {
            retunVal = true;
        }
    });
    return retunVal;
}

if( $('.navwhite').length > 0 ) { // if target element exists in DOM
	if( isTargetVisble() ) { // if target element is visible on screen after DOM loaded
        $('#main-header').addClass( "turnwhite" ); // Remove Turn White
        console.log('turned white by non-interval');
	} else {
        $('#main-header').removeClass( "turnwhite" ); // Remove Turn White
        console.log('kept black by non-interval');
	}
}
window.setInterval(function(){ // bind window scroll event
	if( $('.navwhite').length > 0 ) { // if target element exists in DOM
		if( isTargetVisble() ) { // if target element is visible on screen after DOM loaded
			$('#main-header').addClass( "turnwhite" ); // Remove Turn White
      console.log('turned white');
		} else {
      $('#main-header').removeClass( "turnwhite" ); // Remove Turn White
      console.log('kept black');
      }
	}
}, 200);
</script>

Step 4
Add the following CSS to the " Inside " custom code section:

<style>
.turnwhite {
filter: invert(100%);
}
</style>

Step 5
Save & Publish!

4

Hi Alex,

Thanks for the help! I actually found a better solution with JS, where all I have to do is flip a toggle in the CMS collection panel to tell the nav what colour it should be when the slide is in view. I posted the instructions below.

1 Like
5

Perfect, thanks for sharing!