Change Text Color Black to White on Overlap of Bg

Change text color black to white on overlap of bg

You can use gradient to color the text. The trick is to have this gradient similar to your shape (same degree and coloration change at the edge of the shape). Since your skewed element is fixed, you need to make the gradient to also be fixed to create the magic effect of text scrolling:

.gradient-background {

  position: fixed;

  top: 0;

  left: 0;

  width: 100px;

  height: 200px;

  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));

  transform: skewY(-15deg);

  transform-origin:left;

}

.scroll-content {

  position: absolute;

  top: 50px;

  /* 165deg = 180deg - 15deg   */

  background: linear-gradient(165deg, #fff 195px,#000 195px) fixed;

  background-clip: text;

  -webkit-background-clip: text;

  color: transparent;

  -webkit-text-fill-color: transparent;

}

<div class="gradient-background">

</div>

<div class="scroll-content">

  <p> abc 1 </p>

  <p> abc 2 </p>

  <p> abc 3 </p>

  <p> abc 4 </p>

  <p> abc 5 </p>

  <p> abc 6 </p>

  <p> abc 7 </p>

  <p> abc 8 </p>

  <p> abc 9 </p>

  <p> abc 10 </p>

  <p> abc 11 </p>

  <p> abc 12 </p>

  <p> abc 13 </p>

  <p> abc 14 </p>

  <p> abc 15 </p>

  <p> abc 16 </p>

  <p> abc 17 </p>

  <p> abc 18 </p>

  <p> abc 19 </p>

</div>

Change the colour of text that overlaps an image

Use the CSS clip-path property

Example

:root {
  --size: 100px;
}

.resizable {
  border: 2px solid black;
  width: calc(var(--size) * 3);
  height: calc(var(--size) * 2);
  resize: both;
  overflow: auto;
}

.container {
  position: relative;
}

.divider {
  height: 100px;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}

img {
  width: var(--size);
  height: var(--size);
}

.left {
  color: blue;
  clip-path: polygon(0 0, var(--size) 0, var(--size) var(--size), 0 var(--size));
}

.right {
  color: red;
  clip-path: polygon(var(--size) 0, 100% 0, 100% 100%, 0 100%, 0 var(--size), var(--size) var(--size));
}

.container-reverse img {
  float: right;
}

.container-reverse .left {
  clip-path: polygon(100% 0, 100% var(--size), calc(100% - var(--size)) var(--size), calc(100% - var(--size)) 0);
}

.container-reverse .right {
  clip-path: polygon(0 0, calc(100% - var(--size)) 0, calc(100% - var(--size)) var(--size), 100% var(--size), 100% 100%, 0 100%);
}

.container-reverse h1 {
  text-align: right;
}

<div class="resizable">
  <div class="container">
    <h1 class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <h1 class="title right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <img src="http://placehold.it/100x100" />
  </div>
  <div class="divider"></div>
  <div class="container container-reverse">
    <h1 class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <h1 class="title right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <img src="http://placehold.it/100x100" />
  </div>
</div>

Change text color to white on any non-white background

Here is an idea that rely on background coloration and not mix-blend-mode. The trick is to have a gradient with the same dimension as the image that you move the same way to simulate the blend mode:

const box = document.querySelector(".box");

const h1 = document.querySelector("h1");

window.addEventListener('mousemove', function(event) {

  box.style.left = `${event.pageX - 50}px`;

  box.style.top = `${event.pageY - 50}px`;

  

  h1.style.backgroundPosition = `${event.pageX - 50}px ${event.pageY - 50}px`;

});

.wrapper {

  background-color: white;

}

h1 {

  position: relative;

  z-index: 2;

  color: white;

  background: 

    /*gradient                   position   /    size  */

    linear-gradient(#fff,#fff) -100px -100px/100px 100px fixed no-repeat,

    #000;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}

.box {

  width: 100px;

  height: 100px;

  position: absolute;

  z-index: 1;

  background-image: url("https://placekitten.com/100/100")

}

<div class="wrapper">

  <h1>Lorem Ipsum</h1>

</div>

<div class="box"></div>

Setting text color to inverted background color

div {
  background: linear-gradient(to right, #fff, #000);
  width: 100vh;
  height: 50vh;
}

span {
  font-size: 30vh;
  mix-blend-mode: difference;
  filter: invert(1);
}

<div>
  <span>Test</span>
</div>

Dual-Color Text

You can also use background-clip:text to color the text with a gradient and you can easily have any combination of color:

#main {

  background: linear-gradient(to right, red 50%, #fff 50%);

}

#main>p {

  background: linear-gradient(to left, blue 50%, #fff 50%);

  display: inline-block;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color:transparent;

}

<div id="main">

  <p>I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects. I am multicolor text. Multicolor text i am. This really does feel great. No duplicated

    content was needed for this effect. It's created by using blending effects.</p>

</div>

How to change the text color of a transparent header on scroll, depending on the div it overlaps

What is happening in your code is that on scroll, you loop through every color-menu div and add the class if it is the current one... but then the code continues to loop though the remaining elements in the array and removes it again because the page is not in the other div.

I've explained step-by-step the changes you need to get this to work after the example, but first you can see it working here:

Working Example:

$(document).ready(function() {
  $(".white").addClass("color-menu");
  $(".white-bold").addClass("color-menu");
  $(".light").addClass("color-menu");
  $(".light-bold").addClass("color-menu");
  $(".bright").addClass("color-menu");

  $(window).scroll(function() {

    var inColorMenu = false;            /* initialise var to store if we are in color-menu */
    var top_of_screen = $(window).scrollTop();          /* just get this once outside loop */

    /* Loop through each color-menu element and check if we are in one */
    $('.color-menu').each(function(i) {
      var top_of_element = $(this).offset().top;
      var bottom_of_element = top_of_element + $(this).outerHeight();

      /* if we are in a color-menu element, set our var to true and stop processing */
      if ((top_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
        inColorMenu = true;
        return false;         /* N.B. need to return "false" to break from the "each" loop */
      }
    });

    if (inColorMenu) {
      $(".header").addClass("dark-menu");
    } else {
      $(".header").removeClass("dark-menu");
    }
  });
});

.header {
  width: 100%;
  background: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 10px;
  position: fixed;
  text-align: center;
}

.header a {
  color: white;
  font-size: 2rem;
  text-transform: uppercase;
}

.header.dark-menu a {
  color: black;
}

.black {
  background-color: black;
  height: 200px;
}

.white,
.white-bold,
.light,
.light-bold,
.bright {
  background-color: white;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <a>This is the header</a>
</div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white-bold"></div>
<div class="black"></div>
<div class="light"></div>
<div class="black"></div>
<div class="light-bold"></div>
<div class="black"></div>
<div class="bright"></div>

---

Related Topics