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

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内容下方向上移动，你可以看到它。在#pin下，如何使用CSS使.text不可见？我需要维持目前的设计，以山为背景。

Answer 1

您可以在场景中为.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。