根據背景顏色更改多個元素顏色

Question

我有一個固定的菜單，由多個元素組成。 我試圖找到一種方法讓所有這些元素根據背景顏色改變顏色。

元素是一個

#page::before,
.logo-scroll

這兩個元素都有一個白色邊框（沒有填充）

主導航.main-navigation及其邊框的鏈接為白色

標志是白色的。 我也有黑色版本。

我的網站由3種顏色組成，黑色，白色和黃色。

當背景部分為黃色或白色時，我希望這些項目切換為黑色。

該網站正在進行中，但您可以在此處查看： https ： //www.sheree-new.shereewalker.com

我試過這個標志

https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html

但無法讓它發揮作用。 我嘗試了混合混合模式的元素，但它在黃色時使線條變藍。 我試着做混合混合模式，然后使用去飽和度或灰度過濾器，但沒有運氣。

在一個問題中解決這個問題可能太多了，但我想也許有一個插件可以在Wordpress中處理這個問題？

基本上我需要的是所有元素https://codepen.io/whatthephuc/pen/QQagBj

包含左右導航元素的標題：

<div class="logo-scroll">
        <div class="scroll-text">
            <a href="/home"><img width="53px" height="260px" src="/wp-content/uploads/2019/07/sheree-walker-web-design-edinburgh-vertical-01.svg"/></a>
        </div>
    </div>  

    <header id="masthead" class="site-header">
        <nav id="site-navigation" class="main-navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'sheree_walker' ); ?></button>
            <?php
            wp_nav_menu( array(
                'theme_location' => 'menu-1',
                'menu_id'        => 'primary-menu',
            ) );
            ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

CSS

header#masthead {
    height: calc(100vh - 60px);
    width: 75px;
    position: fixed;
    float: right;
    right: 30px;
    top:30px;
}

#site-navigation {
    transform: rotate(90deg);
    transform-origin: top left;
    position: relative;
    right: -75px;
    width: calc(100vh - 60px);
}

.main-navigation li {
    float: left;
    position: relative;
    text-align: center;
    width: 33.33%;
    padding: 23px 20px 21px 20px;
    font-size: 23px;
    font-family: 'NeurialGrotesk';
}

.main-navigation li {
    border-bottom: 2px solid white;
}

.main-navigation li:nth-child(n+1) {
    border-right: 2px solid white;
}

.main-navigation a {
    color: white;
    letter-spacing: .5px;
}

#page::before {
    content: "";
    position: fixed;
    top: 30px;
    bottom: 30px;
    left: 30px;
    right: 30px;
    border: 2px solid white;
    pointer-events: none;
}

.logo-scroll {
    position: fixed;
    left: 30px;
    top: 30px;
    bottom: 30px;
    border: 2px solid white;
    width: 75px;
}

.scroll-text {
    position: fixed;
}

所有部分都有黃色或白色的類 - 默認背景為黑色。

對合適插件的任何幫助或建議都會很棒。

**編輯 - 如果應用於背景顏色，這樣的東西將是完美的

https://github.com/kennethcachia/background-check

我也嘗試了這種工作，但也隨機生成背景顏色

contrast();

function contrast() {

    var R, G, B, C, L;

    $( "main-navigation a" ).each(function() {

        R = (Math.floor(Math.random() * 256));
        G = (Math.floor(Math.random() * 256));
        B = (Math.floor(Math.random() * 256));

        $( this ).css( 'background-color', 'rgb(' + R + ',' + G + ',' + B + ')' );

        C = [ R/255, G/255, B/255 ];

        for ( var i = 0; i < C.length; ++i ) {

            if ( C[i] <= 0.03928 ) {

                C[i] = C[i] / 12.92

            } else {

                C[i] = Math.pow( ( C[i] + 0.055 ) / 1.055, 2.4);

            }

        }

        L = 0.2126 * C[0] + 0.7152 * C[1] + 0.0722 * C[2];

        if ( L > 0.179 ) {

            $( this ).css( 'color', 'black' );

        } else {

            $( this ).css( 'color', 'white' );

        }

    });

}

Answer 1

這是使用javascript控制文本顏色的一種非常基本的方法。

您可以根據滾動高度精確控制顏色更改的位置。

 var p = document.querySelector('p'); var d = document.querySelectorAll('div'); var colors = ['white', 'red', 'black']; var offset = 0.025; var scrollHeight = document.documentElement.scrollHeight-innerHeight; window.addEventListener('scroll', function () { var scroll = scrollY/scrollHeight; p.style.color = colors[0]; var h = 0; for (var i=1; i<d.length; i++) { h += d[i-1].offsetHeight; if (scroll > (h/scrollHeight)-offset) p.style.color = colors[i]; } }); 

 body { margin: 0; } div { } .black { background: black; height: 150vh; } .yellow { background: yellow; height: 100vh; } .white { background: white; height: 200vh; } p { color: white; position: fixed; } 

 <p>I'll change color on scroll</p> <div class="black"></div> <div class="yellow"></div> <div class="white"></div> 

Answer 2

這是一個使用JS + CSS的非常基本的實現，它在調整大小時滾動時將彩色子項添加到導航塊：

 addEventListener("scroll", fixNavigation); addEventListener("resize", fixNavigation); if (document.readyState === "complate") fixNavigation(); else addEventListener("load", fixNavigation); function fixNavigation() { [...document.querySelectorAll("#nav>.nav-background")].forEach(item => item.remove()); var nav = document.getElementById("nav"); var scrolled = document.documentElement.scrollTop; var currentHeight = 0; document.querySelectorAll(".box").forEach(function(box) { var navBackground = document.createElement("div"); navBackground.className = "nav-background"; nav.appendChild(navBackground); navBackground.setAttribute("style", `top: ${currentHeight - scrolled}px; background: ${box.getAttribute("other-color")};`); currentHeight += box.offsetHeight; }); } 

 body { margin: 0; } #nav { position: fixed; top: 0px; left: 0px; bottom: 0px; width: 40px; } .box { width: 100%; height: 100px; } .red { background: #ff8888; } .green { background: #a2ffa2; } .blue { background: #7171ff; } .nav-background { pointer-events: none; position: absolute; height: 100px; right: 0; left: 0; } 

 <div id="nav"> </div> <div class="box red" other-color="purple"></div> <div class="box green" other-color="black"></div> <div class="box blue" other-color="yellow"></div>