How to change navigation text color on fullscreen scroll based on background?

Question

Title says it all really. Here is an example of what I'm trying to achieve navigation color change image based on background

The problem is that it needs to work with a site that's using a scroll-jacking parallax type effect, here is the site I'm trying to achieve this effect with demo website

Answer 1

Modify the scroll script a bit

Check demo here

Created the function toggleHeaderColor to check the current section. Since the scroll script is indexing each section in order 0 (i.e. section_1) ,1 (i.e. section_2),2 (i.e. section_2),3 (i.e. section_3),4 (i.e. section_2) and so on. Every time you scroll it gets updated.

In scroll script there are two function nextItem() and previousItem()form which we get the current slide index and on that we can call our function to toggle dark class on header elements.

JS:

var sectionBlock = $(".section-item");
var getCurrentSlideAttr = 0;

function toggleHeaderColor(getCurrentSlideAttr) {
  if (getCurrentSlideAttr == 0) {
    $(".menu-link, .menu-link-logo, .menu-link-last").removeClass("dark");
  }
  if (getCurrentSlideAttr == 1) {
    $(".menu-link, .menu-link-logo, .menu-link-last").addClass("dark");
  }
  if (getCurrentSlideAttr == 2) {
    $(".menu-link, .menu-link-logo, .menu-link-last").removeClass("dark");
  }
  if (getCurrentSlideAttr == 3) {
    $(".menu-link, .menu-link-logo, .menu-link-last").removeClass("dark");
  }
  if (getCurrentSlideAttr == 4) {
    $(".menu-link, .menu-link-logo, .menu-link-last").addClass("dark");
  }
}

var ticking = false;
var isFirefox = /Firefox/i.test(navigator.userAgent);
var isIe =
  /MSIE/i.test(navigator.userAgent) ||
  /Trident.*rv\:11\./i.test(navigator.userAgent);
var scrollSensitivitySetting = 30;
var slideDurationSetting = 800;
var currentSlideNumber = 0;
var totalSlideNumber = $(".section-item").length;
function parallaxScroll(evt) {
  if (isFirefox) {
    delta = evt.detail * -120;
  } else if (isIe) {
    delta = -evt.deltaY;
  } else {
    delta = evt.wheelDelta;
  }
  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);
function nextItem() {
  getCurrentSlideAttr = currentSlideNumber;
  toggleHeaderColor(getCurrentSlideAttr);
  var $previousSlide = $(".section-item").eq(currentSlideNumber - 1);
  $previousSlide
    .css("transform", "translate3d(0,-130vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(40vh)");
  currentSlideTransition();
}
function previousItem() {
  //console.log($(".section-item").eq(currentSlideNumber).attr('id'))
  getCurrentSlideAttr = currentSlideNumber;

  toggleHeaderColor(getCurrentSlideAttr);
  var $previousSlide = $(".section-item").eq(currentSlideNumber + 1);
  $previousSlide
    .css("transform", "translate3d(0,30vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(30vh)");
  currentSlideTransition();
}
function currentSlideTransition() {
  var $currentSlide = $(".section-item").eq(currentSlideNumber);
  $currentSlide
    .css("transform", "translate3d(0,-15vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(15vh)");
}

Answer 2

Update

You can actually choose a specific text color over white/black backgrounds using css blend modes.

Example with specific colors (green over white and red over black in this case):

html, body {
  margin: 0;
}

h1 {
  position: fixed; top: 0; left: 0;
  width: 100vw;
  text-align: center;
  mix-blend-mode: difference;
  color: white;
  z-index: 1;
}

div {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: white;
  margin: 0;
}

div:nth-of-type(2n) {
  background: black;
}

div:after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

div:nth-of-type(2n):after {
  background: red;
  mix-blend-mode: multiply;
  
}

div:nth-of-type(2n + 1):after {
  background: green;
  mix-blend-mode: screen;
}

<h1>Scroll to see effect</h1>
<div></div>
<div></div>
<div></div>

I think the only way you would be able to choose the exact partial colors using SVG text or paths.

A simple example with mix-blend-mode:

html, body {
  margin: 0;
}

h1 {
  position: fixed; top: 0; left: 0;
  width: 100vw;
  text-align: center;
  mix-blend-mode: difference;
  color: white;
  z-index: 1;
}

div {
  width: 100vw;
  height: 100vh;
  background: black;
}

div:nth-of-type(2n) {
  background: white;
}

<h1>Scroll to see effect</h1>
<div></div>
<div></div>
<div></div>

Browser support

https://css-tricks.com/reverse-text-color-mix-blend-mode/

Answer 3

Try Adding mix-blend-mode property.

Add this property to your .navigation-menu class

CSS

.navigation-menu{
    mix-blend-mode: difference;
}

Hope this Helps...