固定コンテンツの下にスクロール可能なテキストが表示されないようにする

Question

スクロールマジックを使用してコンテンツをスクロールし、コンテンツの一部を固定します。ここでは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を参照してください。