使固定內容下的可滾動文本不可見

我正在使用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不可見？我需要維持目前的設計，以山爲背景。

來源

2017-10-07 curious1

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

來源

2017-10-07 04:46:13 zgood

感謝您的幫助！這是行不通的。我用了一段作爲例子。對不起，太簡單了。我實際上有多個段落，並且它們一起消失。我希望讓他們一個一個消失。請參閱此鏈接：https://jsfiddle.net/mddc/93sagkab/25/ – curious1

會[像這樣]（https://jsfiddle.net/93sagkab/28/）工作？我想也許它需要一些調整，但這個想法可能是好的。只需循環嵌套在'.text'中的元素並用偏移量將它們添加到控制器。 – zgood

你好zgood，非常感謝你的跟進！我複製了你的想法並使其工作。最好。 – curious1

使固定內容下的可滾動文本不可見

回答

相關問題