如何在页面滚动时隐藏元素？

Question

当我在页面中向上滚动时，我试图隐藏一个元素。我正在使用剪辑路径和位置：固定来尝试实现这一目标。 This 是我目前所拥有的。当我按预期滚动时，文本被隐藏。想知道是否可以在我滚动时从顶部开始剪辑它，而不是现在工作的底部。

我希望在向下滚动时从顶部剪掉元素。

我的一个想法是将文本旋转 180 度，然后将剪裁的元素旋转 180 度，但我不太确定这是否可行/如何实现它。由于 transform 创建了一个包含块，我不知道如何让滚动工作。

#main-container {
  position: relative;
  height: 100px;
  width: 100vw;
}
#clip-container {
  position: absolute;
  height: 80px;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
  background-color: rgba(255, 165, 0, 0.5);
  margin-top: 10px;
}

.filler-div {
  background-color: blue;
  width: 100vw;
  height: 100px;
}
#text {
  position: fixed;
}

<div class="filler-div"></div>
  <div id="main-container">
    <div id="clip-container">
      <div id="text">
        <h1>TEXT GOES HERE</h1>
      </div>
    </div>
  </div>
  <div class="filler-div"></div>

Answer 1

了解以下任何 javascript 库

scrollrevealjs.org

scrollmagic.io