根据背景剪切位置固定的文本颜色

Question

我有以下代码，我试图一次更改背景的字体颜色。

我想要获得的结果是，“设计”在橙色背景上为黑色，何时在绿色背景上为橙色，而在白色背景上为黑色。另外，我希望“完美”一词在绿色背景上带有一种颜色，在白色背景上带有另一种颜色。

我曾尝试用JS做到这一点，但我希望过渡是平滑的（尽可能多地过渡到特定背景以根据其位置改变颜色）

我认为最好的解决方案是裁剪，但我不知道该如何实现。

https://jsfiddle.net/bpgw0x3c/10/-链接到我的代码

.graphic-design-page {
  height: 300vh;
  position: relative;
  background-color: white;
}

.graphic-design-white,
.graphic-design-black,
.graphic-design-orange {
  height: 100vh;
  position: relative;
}

.graphic-design-black {
  background-color: green;
  z-index: 5;
}

.graphic-design-orange {
  background-color: orange;
  z-index: 9;
}

.design-title,
.design-subtitle {
  padding: 0;
  font-weight: 700;
}

.design-title {
  z-index: 2;
  font-size: 7vh;
}

.top-of-text {
  z-index: 999;
  position: relative;
}

.design-subtitle {
  font-size: 7vh;
}

.fixed1 {
  position: fixed;
  top: 100px;
  z-index: 10;
}

.fixed2 {
  position: fixed;
  top: 200px;
  z-index: 6;
}

.fixed3 {
  position: fixed;
  top: 0px;
  z-index: 4;
}

.graphic-build-page {
  height: 100vh;
  background-color: blanchedalmond;
}

.build-title {
  font-size: 200px;
}

.graphic-aplications-page {
  height: 100vh;
}

<div class="graphic-design-page">
  <div class="graphic-design-orange"></div>
  <div class="graphic-design-black"></div>
  <div class="graphic-design-white"></div>
  <div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">

      <div class="col-12 design-title fixed1">DESIGN</div>

      <div class="col-12 design-subtitle fixed2"> Perfect</div>
      <div class="col-12 design-subtitle fixed3">Style</div>

    </div>
  </div>
</div>

我在照片上附加了想要达到的效果，但是由于z-index属性和多项更改，我感到很挣扎。