滚动魔术淡出了

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);