javascript - 按背景颜色剪辑文本

Question

我正在创建一个全屏介绍页面。 我需要创建一个下拉列，将背景颜色从深色变为浅色并显示内容。但我需要将主标题(文本)剪辑为背景颜色 - 在动画过程中它会发生变化。

浅色背景上的文字应为黑色

这是JSFiddle

SCSS

.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;

新 JSFiddle

Answer 1

您可以编辑标题 css 使其显示:

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

}

注意:这可能不适用于旧版本的 IE - 让我知道这对您来说效果如何，干杯。

查看有关 mix-blend-mode 属性的更多信息 here .

更新:这是一个修改后的 fiddle ，显示动画包裹在列上，而不是每列动画 - https://jsfiddle.net/kqyno63x/