使可滚动文本在固定内容下不可见

Question

我正在使用 Scroll Magic 滚动内容并固定部分内容。这是 HTML:

<div class="container">
  <div class="header">
    <div style="height:400px;">
    </div>
    <div id="trigger1" style="min-height: 1px"></div>
    <div id="pin" style="font-size: 30px; color: #fff;text-align:center;padding:30px 0;">
      This is header
    </div>
  </div>
  <div class="text-container">
    <p class="text">
       Lorem Ipsum is simply ....
    </p>
    <p class="text">
       Lorem Ipsum is simply ....
    </p>
    <p class="text">
       Lorem Ipsum is simply ....
    </p>
  </div>
</div>

这是Javascript:

      $(function () { 
           var controller = new ScrollMagic.Controller({
                globalSceneOptions: {
                    triggerHook: 'onLeave'
                }
            });
            var scene = new ScrollMagic.Scene({triggerElement: "#trigger1"})
                    .setPin("#pin")
                    .addTo(controller);
      });

这是 jsfiddle：https://jsfiddle.net/mddc/93sagkab/27/

当“.text”向上移动到 #pin 内容下方时，您可以看到它。如何使用 CSS 让 .text 在 #pin 下不可见？我需要保持当前的设计，以山为背景。

Answer 1

您可以将 class 作为场景的一部分添加到 .text 元素。像这样：

 var scene = new ScrollMagic.Scene({triggerElement: "#trigger1"})
                    .setPin("#pin")
                    .setClassToggle(".text", "fade") //Add a class called "fade"
                    .addTo(controller);

然后在.text元素的css中定义一个transition。

.text {
  height: 1000px;
  transition: opacity 150ms ease-out; //Add this
}

然后定义.fade样式：

.text.fade {
  opacity: 0;
}

看到这个fiddle。

使可滚动文本在固定内容下不可见

Make the scrollable text not visible under pinned content

css

scrollmagic