如何根据背景更改全屏滚动上的导航文本颜色？

Question

标题说真的。以下是我尝试实现navigation color change image based on background

的示例

问题在于它需要使用滚动顶视视觉类型效果的网站，这是我尝试用demo website

Answer 1

稍微修改滚动脚本

检查演示 here

创建函数toggleHeaderColor以检查当前部分。由于滚动脚本按顺序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索引每个部分。每次滚动都会更新。

在滚动脚本中有两个函数nextItem()和previousItem()形式，我们获取当前幻灯片索引，然后我们可以调用我们的函数来切换标题元素上的dark类。 / p>

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

更新

您可以使用css混合模式在白/黑背景下选择特定的文字颜色。

具有特定颜色的示例（在这种情况下为绿色，白色为红色，红色为黑色）：

DateTimePicker

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

我认为只有这样才能使用SVG文本或路径选择精确的部分颜色。

<h1>Scroll to see effect</h1> <div></div> <div></div> <div></div>的简单示例：

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

Browser support

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

Answer 3

尝试添加mix-blend-mode属性。

将此属性添加到.navigation-menu类

CSS

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

希望这有助于......