Logo color change based on section

С този snippet ще ви демонстрирам как можем да променяме цвета на логото на база на фоновия цвят на секцията, върху която се намира.

Бележка: ефектът описан по-долу работи най-добре, когато имаме лого (или цял header), който е с position: fixed; и е видим през цялото време.

Първо имаме header markup-а с включено SVG лого. Важно: за да сработи тази функционалност е важно логото да ни бъде подадено в SVG:

 <div class="header" id="header">
    <div class="logo" id="header-logo">
        <a href="#" title="link to home page">                  
            <svg class="logo-svg" viewBox="0 0 239 61" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M29.5648 57.4838C44.5033 57.4838 56.6134 45.3738 56.6134" fill=""/>
                <path d="M82.4332 30.0359C77.0063 30.0359 73.1958 25.8214 73.1669" fill=""/>
            </svg>
        </a>
    </div>
</div>

За всяка секция в markup-a на страницата е важно да добавим класът „black-header“, в случай, че желаем когато логото е върху нея, то да бъде в тъмния си вариант:

<section class="cards-section black-header">
    <p> Some lorem ipsum content here</p>
</section>

Накрая идва и логиката, която добавяме с JavaScript. Какво прави? На първо място запазваме самото лого, неговите path елементи (тъй като е SVG) и всяка секция в три променливи. След това вземаме позицията на viewport-a и проверяваме дали сме върху секция с клас име „black-header“. Ако е така, променяме fill на всеки path с думата „black“ (която може да бъде заменена и от hex стойност, напр. #000000;

const changeHeaderLogo = () => {
    const header = document.getElementById("header");
    const logoPaths = document.querySelectorAll(".logo path"); 
    const sections = document.querySelectorAll("section");

    const updateHeaderColor = () => {
        let headerColor = "white"; 
        sections.forEach(section => {
            const rect = section.getBoundingClientRect();
            if (rect.top <= header.offsetHeight && rect.bottom > header.offsetHeight) {
                if (section.classList.contains("black-header")) {
                    headerColor = "black";
                }
            }
        });

        logoPaths.forEach(path => {
            path.style.fill = headerColor;
        });
    };

    window.addEventListener("scroll", updateHeaderColor);
    updateHeaderColor(); 
};


changeHeaderLogo();

Happy coding 🙂

Нова работилница

Популярни уроци и статии