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

Scroll Magic淡入淡出

1 个答案: