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

score 2 · Answer 1 · answered Jul 31 '17 at 19:53

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)");
}

This doesn't seem to solve the problem either. Although I've switched to fullpage.js as I felt the old set up was a bit clunky, so some of this code no longer applies. — Jordan M, Jul 31 '17 at 21:37

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

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/

score 1 · Answer 3 · answered Jul 31 '17 at 17:39

1

Try Adding mix-blend-mode property.

Add this property to your .navigation-menu class

CSS

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

Hope this Helps...

answered Jul 31 '17 at 17:39

Chandra Shekhar

3,550
2
14
22

It's a very basic solution, however it is causing the font to look like a boldness effect has been added to it and for background colors other than black or white it causes the text color to change. Preferably I'm looking for a solution that allows me to control what color it changes to on each section. – Jordan M Jul 31 '17 at 17:52

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

3 Answers3

Update