Текстовый клип по цвету фона

Question

Я создаю полноэкранную заставку. Мне нужно создать выпадающие столбцы, которые меняют цвет фона с темного на светлый и раскрывают содержимое. Но мне нужно, чтобы основной заголовок (текст) обрезался до цвета фона - по мере анимации он меняется.

На светлом фоне текст должен быть черным

Есть JSFiddle

S CSS

.header{
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;

  .overlay{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;

    .col{
      flex: 1;
      width: 100%;
      height: 100%;
      background-color: black;
    }
  }

  .content{
    flex: 1;
    display: flex;
    flex-direction: column;

    > div{
      flex: 1;
    }

    .title{
      position: relative;
      color: white;
      z-index: 2;
    }

    .posts{
      display: flex;
      position: relative;
      z-index: 0;

      a{
        display: block;
        width: 100%;
        height: 100%;
        background: lightblue;
        text-align: center;
      }
    }
  }
}

И JS

$(document).ready(function(){

  setTimeout(function () {

    $(".overlay .col").each(function (i) {
        var col = $(this);
      setTimeout(function () {

        if(!col.hasClass('animated')){
            col.addClass('animated');
            col.slideUp(500);
        }

      }, 150 * i);
    });

  }, 500);

});

Также существует некоторая ошибка между анимациями, я хотел знать, почему это происходит

РАЗРЕШЕНО
добавить к .header

background: white;

и к .header .content .title {

mix-blend-mode: exclusion;

NEW JSFiddle

Answer 1

Можете ли вы отредактировать свой заголовок css, чтобы он показывал:

.title{
  position: relative;
  mix-blend-mode: exclusion;
  color:white;
  z-index: 3;

}

Примечание: это может не сработать для более старых версий IE - дайте мне знать, как это работает для вас, ура.

Подробнее о свойстве mix-blend-mode здесь .

Обновление: Вот измененная скрипка, показывающая анимацию, наложенную на столбцы, а чем анимация на столбец - https://jsfiddle.net/kqyno63x/

Answer 2

Вы можете установить цвет и непрозрачность для текста, который вы хотите отобразить в фоновом режиме. пожалуйста, обратитесь ниже код. Также, пожалуйста, найдите ссылку на скрипку для того же.

.textBackground{
 color:black;
 opacity: 0.3;
}
<h1 class="textBackground">Lorem ipsum dolor sit amet</h1>