частичное окрашивание текста

Question

Пытаюсь менять цвет текста sticky элемента, когда он накладывается на другие элементы. Цвет должен меняться только у той части текста, которая уже наложена на какой-то элемент. Mix-blend-mode, к сожалению, не дает выбрать цвет текста. какие есть варианты? Демо с mix-blend-mode:

.container {
  width: 60%;
  margin: 0 auto;
  height: 1000px;
}

img {
  max-width: 100%;
}

header {
  font-size: 3rem;
  position: sticky;
  top: 0;
  mix-blend-mode: overlay;
}

<div class="container">
  <header>Lorem ipsum dolor sit amet.</header>
  <main>
    <img src="https://images.unsplash.com/photo-1583364493238-248032147fbd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" alt="">
  </main>
</div>

ожидаемый результат:

Answer 1

Как вариант можно попробовать средствами JS, если позволяют обстоятельства. Но занимаясь достаточное время с css/scss я не видел стабильных и хорошо поддерживаемых средств, чтобы реализовать твою задачу. Иногда даже, казалось бы простые вещи, но на Safari выглядит непредсказуемо. JS в твоём случае более гибкий инструмент для решений подобных тасков. Особо не выделывался с JS, цель была - показать принцип. Надеюсь мой ответ чем-то поможет, удачи.

P.S. Для красоты перехода можно добавить разные анимашки, transition на цвет. И будет красота ))

body {
  margin: 0;
}

.container {
  width: 60%;
  margin: 0 auto;
  height: 1000px;
}

img {
  max-width: 100%;
}

.header {
  font-size: 3rem;
  position: sticky;
  top: 0;
  //mix-blend-mode: overlay;
}

.extra {
  color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="css.css">
</head>

<body>
  <div class="container">
    <header class="header">Lorem ipsum dolor sit amet.</header>
    <main>
      <img src="https://images.unsplash.com/photo-1583364493238-248032147fbd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" alt="">
    </main>
  </div>
</body>
<script>
  var el = document.getElementsByClassName('header')[0];
  var heightEl = el.clientHeight;

  document.body.onscroll = function() {

    var scrollEl = el.offsetTop;

    if (scrollEl > heightEl && scrollEl < heightEl * 3) {
      document.querySelector('.header').classList.add('extra')
    } else {
      document.querySelector('.header').classList.remove('extra')
    }
  }
</script>

</html>

Answer 2

Как один из вариантов, есть над чем подумать. Но это если совсем ничего не изобретать, хотя можно.

h1 {
  font-size: 40vh;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  letter-spacing: 20px;
}

.background {
  background: cornflowerblue;
}

.text {
  position: relative;
  color: black;
}

.invert {
  background: red;
  mix-blend-mode: difference;
}

.invert,
.background {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0;
  animation: slide 4s ease-in-out infinite alternate;
}

@keyframes slide {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

<h1>
  <span class="background"></span>
  <span class="invert"></span>
  <span class="text">Пушкин</span>
  <span class="invert"></span>
</h1>

БЛОГ НА HUSL

частичное окрашивание текста

Ответы (2 шт):