Question

我是滚动魔法的新手，所以只是习惯于场景和补间。所以我有一个非常基本的设置

<section id="sectionPlaceholder" class="section">
</section>
<section id="sectionOne" class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageOne">
      </div>
      <div class="col-md-6">
        <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageTwo">
      </div>
    </div>
  </div>
</section>

基本上是两个部分。第一个只是占位符部分，因此您可以看到动画触发器。第二部分包含两个并排的图像。每个部分都有一个min-height:100vh;

我在Codepen

上创建了此副本

如您所见，当您向下滚动时，一旦您点击sectionOne，就会触发动画。动画是正确的，我基本上希望图像以相同的速率缩放。不正确的是，只要你点击该部分，动画会立即一直运行。

我追求的是这个。点击该部分后，将触发动画。向下滚动该部分时，图像会向上扩展。一旦你到达该部分的底部，比例就达到了1.2。换句话说，动画应该在您点击该部分的底部时立即完成，而不是立即运行。

如果然后向上滚动，则会发生相反的情况。

希望以上是有道理的。我实际上寻找的是通过滚动控制的图像scalling，向下滚动越多，图像越大。

我怎么能达到这样的目标？

由于

Answer 1

您可以在duration之后添加triggerElement设置，例如，您可以使用窗口高度作为持续时间，就像我在此示例中所做的那样。在您的情况下将是

$(function() {
  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
    triggerElement: "#sectionOne",
    duration: jQuery(window).height()
  })
  .setTween("#imageOne", 0.5, {scale: 1.2})
  .addTo(controller);

  var scene = new ScrollMagic.Scene({
    triggerElement: "#sectionOne",
    duration: jQuery(window).height()
  })
  .setTween("#imageTwo", 0.5, {scale: 1.2})
  .addTo(controller);
});

请在此处查看：

https://codepen.io/anon/pen/WZZWJX

使用Scroll Magic进行补间动画

1 个答案: