如何更改基于背景的全屏滚动导航文本颜色？

Question

标题说明了一切。这里是我想要实现的一个例子navigation color change image based on background

问题是，它需要与使用滚动顶起视差类型效果的网站一起使用，这里是我试图实现这种效果的网站与demo website

Answer 1

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

这个属性添加到您的.navigation-menu类

CSS

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

希望这有助于...

Answer 2

修改滚动脚本有点

检查演示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类。

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 3

更新

实际上，你可以选择通过使用CSS混合模式白/黑背景的特定文本颜色。

例如用特定颜色（绿色超过了黑白色和红色在这种情况下）：

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>

我认为你将能够选择确切的部分颜色的唯一途径使用SVG文本或路径。

一个简单的例子与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/