Modify the color of SVG for various sections

Question

Modify the color of SVG for various sections

I'm looking to create a dynamic hamburger menu that changes color based on different sections of the page. I've experimented with a few approaches, but encountered some issues - the first attempt only works when scrolling down, and the second attempt only affects the first two sections.

<div class="nav">
  <svg class="burger" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve">
  <defs>
....
});

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
....
});

JS attempt 1 ( codepen- https://codepen.io/tarunpatnayak/pen/rNYQpwL)

const mSections = document.querySelectorAll("section");
....
});

JS attempt 2 (codepen - https://codepen.io/tarunpatnayak/pen/JjOeMJJ )

const mSections = document.querySelectorAll("section");
....
});

JS attempt 3 (jQuery)(codepen - https://codepen.io/tarunpatnayak/pen/VwrVrba )

var dOffset = $("[data-id = dark]").offset();
....
});

javascript html jquery css

Answer 1

Answer №1

When it comes to creating effects, sometimes simplicity is key. If you don't absolutely need to use SVG and JavaScript, opting for a combination of basic HTML and CSS can suffice. One interesting method to achieve certain effects is by utilizing the 'mix-blend-mode' property. Check out this example for more insight: https://codepen.io/noye/pen/QWOJmvr.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  transition: background 1s ease-in-out;
}

#menuToggle
{
  display: block;
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1;
  mix-blend-mode: difference;
  -webkit-user-select: none;
  user-select: none;
}


#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: white;
  border-radius: 3px;
  z-index: 1;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #000;
  font-family: sans-serif;
  font-size: 72px;
  font-weight: 600;
  text-transform: uppercase;
    
}

[data-id = "dark"]{
  background:black;
  color:white;

}

[data-id = "light"]{
  background:white;
  color: black;
}

<nav role="navigation">
  <div id="menuToggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>
<section class="section dark"  data-id="dark">
One</section>
<section class="section light" data-id="light">Two</section>
<section class="section dark"  data-id="dark">Three</section>
<section class="section light" data-id="light">Four</section>
<section class="section dark"  data-id="dark">Five</section>
<section class="section light" data-id="light">Six</section>
<section class="section dark"  data-id="dark">Seven</section>
<section class="section light" data-id="light">Eight</section>

Answer 2

When it comes to creating effects, sometimes simplicity is key. If you don't absolutely need to use SVG and JavaScript, opting for a combination of basic HTML and CSS can suffice. One interesting method to achieve certain effects is by utilizing the 'mix-blend-mode' property. Check out this example for more insight: https://codepen.io/noye/pen/QWOJmvr.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  transition: background 1s ease-in-out;
}

#menuToggle
{
  display: block;
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1;
  mix-blend-mode: difference;
  -webkit-user-select: none;
  user-select: none;
}


#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: white;
  border-radius: 3px;
  z-index: 1;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #000;
  font-family: sans-serif;
  font-size: 72px;
  font-weight: 600;
  text-transform: uppercase;
    
}

[data-id = "dark"]{
  background:black;
  color:white;

}

[data-id = "light"]{
  background:white;
  color: black;
}

<nav role="navigation">
  <div id="menuToggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>
<section class="section dark"  data-id="dark">
One</section>
<section class="section light" data-id="light">Two</section>
<section class="section dark"  data-id="dark">Three</section>
<section class="section light" data-id="light">Four</section>
<section class="section dark"  data-id="dark">Five</section>
<section class="section light" data-id="light">Six</section>
<section class="section dark"  data-id="dark">Seven</section>
<section class="section light" data-id="light">Eight</section>

Answer 3

Answer №2

I managed to solve this issue independently

For those interested, here is the code snippet

jQuery Version ( https://codepen.io/tarunpatnayak/pen/VwrVrba )

var dSection = document.querySelectorAll(".dark");
for (var i = 0; i < dSection.length; i++) {
  dSection[i].setAttribute("data-hcolor", "white");
}
var lSection = document.querySelectorAll(".light");
for (var i = 0; i < lSection.length; i++) {
  lSection[i].setAttribute("data-hcolor", "black");
}
$(document).ready(function () {
  $(window)
    .scroll(function () {
      var scrollDistance = $(window).scrollTop();
      $(".section").each(function (i) {
        var hColor = $(this).data("hcolor");

        if ($(this).position().top <= scrollDistance) {
          $("svg.burger").css("stroke", hColor);
         // console.log($(this));
        }
      });
    })
    .scroll();
});

JS version ( https://codepen.io/tarunpatnayak/pen/mdqQvoJ )


document.addEventListener("scroll", () => {
  var mSections = document.querySelectorAll(".et_pb_section");
var Hsvg = document.querySelector("svg.burger");

var dSection = document.querySelectorAll(".dark");
for (var i = 0; i < dSection.length; i++) {
  dSection[i].setAttribute("data-hcolor", "white");
}
var lSection = document.querySelectorAll(".light");
for (var i = 0; i < lSection.length; i++) {
  lSection[i].setAttribute("data-hcolor", "black");
}
  
  
  let mCurrent = "";
  mSections.forEach((mSection) => {
    const mSectionTop = mSection.offsetTop;
    const mSectionHeight = mSection.clientHeight;
    if (pageYOffset >= mSectionTop * 0.97) {
      mCurrent = mSection.getAttribute("data-hColor");
      Hsvg.style.stroke = mCurrent;
    }
  });
  console.log(mCurrent);
});

I hope this information proves useful to you. Wishing you a pleasant day ahead.

Answer 4

I managed to solve this issue independently

For those interested, here is the code snippet

jQuery Version ( https://codepen.io/tarunpatnayak/pen/VwrVrba )

var dSection = document.querySelectorAll(".dark");
for (var i = 0; i < dSection.length; i++) {
  dSection[i].setAttribute("data-hcolor", "white");
}
var lSection = document.querySelectorAll(".light");
for (var i = 0; i < lSection.length; i++) {
  lSection[i].setAttribute("data-hcolor", "black");
}
$(document).ready(function () {
  $(window)
    .scroll(function () {
      var scrollDistance = $(window).scrollTop();
      $(".section").each(function (i) {
        var hColor = $(this).data("hcolor");

        if ($(this).position().top <= scrollDistance) {
          $("svg.burger").css("stroke", hColor);
         // console.log($(this));
        }
      });
    })
    .scroll();
});

JS version ( https://codepen.io/tarunpatnayak/pen/mdqQvoJ )


document.addEventListener("scroll", () => {
  var mSections = document.querySelectorAll(".et_pb_section");
var Hsvg = document.querySelector("svg.burger");

var dSection = document.querySelectorAll(".dark");
for (var i = 0; i < dSection.length; i++) {
  dSection[i].setAttribute("data-hcolor", "white");
}
var lSection = document.querySelectorAll(".light");
for (var i = 0; i < lSection.length; i++) {
  lSection[i].setAttribute("data-hcolor", "black");
}
  
  
  let mCurrent = "";
  mSections.forEach((mSection) => {
    const mSectionTop = mSection.offsetTop;
    const mSectionHeight = mSection.clientHeight;
    if (pageYOffset >= mSectionTop * 0.97) {
      mCurrent = mSection.getAttribute("data-hColor");
      Hsvg.style.stroke = mCurrent;
    }
  });
  console.log(mCurrent);
});

I hope this information proves useful to you. Wishing you a pleasant day ahead.

Modify the color of SVG for various sections

Answer №1

Answer №2

Similar questions

Unable to instantiate FormData with the constructor

Ways to access Angular controllers from various folders

Discovering nearby intersections within 2 sets of arrays

Move a Java application from a trial SAP HCP to a complete SAP HCP membership

What is the best method for calculating the total of a mongoose attribute?

Struggling to access the ref object of a Child Component in React JS parent component

The custom pagination feature on WordPress is not functioning as expected

The invokeApply parameter within $interval remains unchanged and has no effect

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

Delaying Jquery on scroll Event

Is there a way for me to convert my (TypeScript Definition) .d.ts file into a (JavaScript) .js file?

JavaScript: converting to string

Incorporating a JavaScript npm module within a TypeScript webpack application

css code for styling html elements

Issue with page not updating after local storage change and returning to previous page

Does the Loopback Model have an "exists" method that includes a where clause?

The PHP script is not receiving the post parameters sent in the ajax request

What is the best way to send my webform data to a web API controller as a model class using JQuery AJAX?

Can someone show me the JavaScript code to split a string at every instance of ' '?

AngularJS magic: display content with ng-show as objects load