«Эффект шторки» — это такой эффект, при котором фон меняется с темного не светлый при прокрутке, а содержимое внутри синхронно меняется с светлого не темный, оставаясь на месте.

Пример реализации средствами HTML и CSS:

Как это работает

Для данного демо будет достаточно следующей разметки:

<div class="curtain">
  <div class="invert">
    <h2>Эффект Шторки</h2>
  </div>
</div>

Оборачивающий контейнер .curtain будет служить для того, чтобы ему указать фон. Поскольку нам необходимо менять цвет фона с одного на другой, зададим фон с помощью градиента. Также увеличим высоту контейнера вдвое, добавив к нему псевдоэлемент такого же размера (который сформирован внутренним элементом .invert):

.curtain {
  background-image: linear-gradient(to bottom, blue 50%, yellow 50%);
}
.curtain::after {
  content: "";
  display: block;
  min-height: 100vh;
}
.invert {
  min-height: 100vh;
}

Чтобы текст при прокрутке оставался на месте, спозиционируем его с помощью значения sticky, а чтобы он менялся в зависимости от фона, применим ему свойство mix-blend-mode. Также подмарафетим выравниванием и зададим цвет:

.invert {
  min-height: 100vh;
  position: sticky;
  top: 0;
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
h2 {
  color: yellow;
}