滾動魔術淡出了

Question

我有一個非常簡單的設置

<section class="section"> 
    <p>Dummy section</p> 
</section> 
<section id="inside" class="section"> 
    <div class="container"> 
     <div class="row"> 
       <div class="col-md-4"> 
       <h3>Some title</h3> 
       <br><br><br> 
       <p class="section-subtitle"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       </p> 
       </div> 
       <div class="col-md-8"></div> 
     </div> 
    </div> 
</section> 

我把一個虛擬的部分在裏面，所以我可以觸發該效果。每個部分是100vh。

本質上，我試圖實現兩件事情。首先，當你向下滾動時，我想讓section-subtitle漸漸消失。所以，可以從大約0.2的不透明度開始，並在向下滾動時使其更強。

我接下來的另一件事是將這個文本放在比它的自然位置低50px左右。當你向下滾動時，我需要它滑回原位。

此刻，我有以下

var controller = new ScrollMagic.Controller(); 

var fadein_tween = TweenMax.to('.section-subtitle', 1, { y:-300 , opacity:0 , ease:Power1.easeInOut }); 

var scene = new ScrollMagic.Scene({ 
    triggerElement: "#inside", 
    duration: jQuery(window).height() 
}) .setTween(fadein_tween) 
.addTo(controller); 

你可以從這個JSFiddle這是不太正確的看到。目前，它正在消失，不在其中。此外，它正在超越其正常位置，進入另一部分。

有沒有辦法實現我之後的事情？

感謝

Answer 1

達到你想要的不透明度和過渡，可以在GSAP使用的FromTo - 設置元素動畫之前屬性。

在這種情況下，我將yPercent設置爲100（translateY：100％）並將不透明度設置爲0.2，然後分別將它們設置爲0和1。

這是一個JSFiddle演示。

var controller = new ScrollMagic.Controller(); 

var fadein_tween = TweenMax 
.fromTo('.section-subtitle', 1, { yPercent:100 , opacity:0.2 }, { yPercent:0 , opacity:1 , ease:Power1.easeInOut }); 

var scene = new ScrollMagic.Scene({ 
    triggerElement: "#inside", 
    trigerHook:"onEnter", 
    duration: "50%" 
}) 
.setTween(fadein_tween) 
.addTo(controller);