Question 11409 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Set text color based on color of another element in the same spot – Jquery

I want my fixed text change its color depending on the exact background color that’s currently behind it, pixel-by-pixel. Is it possible?In the given example, part of the text on the blue background would be white
Is it possible to do if the shape on which the text is displayed has different edges than horizontal/vertical?

I tried using JQuery to target specific elements on the page, knowing that the scroll function will only let me target scroll position, so only horizontal elements, and the text will change color in its entirety, not pixel-by-pixel, which would be my goal, as I’m planning to add custom-shaped backgrounds, and it would make the text readable also in transitional positions, as per the example. However, even this didn’t work, possibly due to some CSS issues. Is here a way to do it in CSS?

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll <= $('.fp-container-1').offset().bottom) {
      $('nav-button').css('color', 'black');
    }
    if (scroll >= $('.fp-container-2').offset().top) {
      $('nav-button').css('color', 'white');
    }
  });

.fp-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.fp-container-1 {
    background-color: rgb(255, 255, 255);
}

.fp-container-2 {
    display: block;
    background-color: rgb(70, 67, 226);
    height: 150vh;
}
Tags:

2

Answers


  1. 0 
    h1 {
  mix-blend-mode: difference;
  color:red;
}


/* LAYOUT */
section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 500px;
  width: 100%;
}

section div {
  position: absolute;
  width:100%;
  height: 50%;
  z-index: -1;
}

.top {
  top: 0;
  background: red;
}

.bottom {
  bottom: 0;
  background: blue;
}

h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 50px;
}
    <section>
  <div class="top"></div>
  <div class="bottom"></div>
  <h1>Hello World</h1>
</section>
    Login or Signup to reply.
  2. 0

    You can achieve this by using the CSS3 filter property.

    The syntax would be:

    .nav-button {
    color: white;
    filter: brightness(50%) invert(1);
}

.fp-container-1 {
    background-color: rgb(255, 255, 255);
}

.fp-container-2 {
    display: block;
    background-color: rgb(70, 67, 226);
    height: 150vh;
    filter: brightness(50%) invert(1);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search