2

I'm trying to get my Hello World to be affected by the red background color as it slides behind, how can this be achieved, if possible at all? The text should change color as the below element slide behind the text

body {
  height: 150vh;
  background: #000;
}

h1 {
  mix-blend-mode: difference;
  color: rgb(255, 255, 255);
  z-index: 2;
  
}

.top {
  position: sticky;
  top: 0;
  height: 50vh;
z-index: 1;

}

.bottom {
  background: rgb(232, 12, 12);
  position: sticky;
  top: 0;
  height: 50vh;
  position: relative;
  isolation: isolate;
}
<div>
  <div class="top">
    <h1>Hello World</h1>
  </div>
  <div class="bottom"></div>
</div>
  • Please clarify what you mean by "affected by" - you haven't described how it should appear... – Dai Sep 24 '22 at 20:54
  • 1
    Also, both your `h1` and `.top` have the same `z-index` value - for clarity you should use different `z-index` values so we can see which element you intend to be on-top of the other. – Dai Sep 24 '22 at 20:55
  • 1
    `mix-blend-mode` controls how an element blends with its parent and ancestors, _not its siblings_. Therefore using `mix-blend-mode` with `h1` means you need to apply the red color to an ancestor of `h1`. – Dai Sep 24 '22 at 21:01
  • Thanks, this is fixed. Please let me know if you need any more details. –  Sep 24 '22 at 21:01
  • Could you elaborate an example that will mirror the requested effect with the sticky element? –  Sep 24 '22 at 21:02

1 Answers1

2

for the mix-blend-mode to work apply it like this

body {
            height: 150vh;
            background: #000;
          }
          
          h1 {
        
            color: rgb(255, 255, 255);
            z-index: 2;
            
          }
          
          .top {
            mix-blend-mode: difference;
            position: sticky;
            top: 0;
            height: 50vh;
          z-index: 1;
          
          }
          
          .bottom {
            background: rgb(232, 12, 12);
            position: sticky;
            top: 0;
            height: 50vh;
            position: relative;
            isolation: isolate;
          }
<div>
        <div class="top">
          <h1>Hello World</h1>
        </div>
        <div class="bottom"></div>
      </div>

some one in your comment section also said the same thing - Dai

Arash Seifi
  • 385
  • 1
  • 9