ScrollMagic 的舞台定位问题

Question

我使用 GreenSock 和 ScrollMagic 创建了一个效果很好的动画，但我不知道如何调整 stage/graphics 的初始位置（在用户触发动画之前）。目前，我在 class 为 'stage' 的容器元素上调用 .setPin 方法。这个舞台元素在一个更大的父容器（#how-it-works）里面，它是动画的触发元素：

var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(controller) .setTween(scrollAnimation);

我遇到的问题是舞台元素最初 "stuck" 在父容器的顶部，我希望它在动画之前在父容器内垂直居中被触发。我尝试调整 .stage 元素上的 'top' CSS 属性，但这需要我使用 !important 并且会产生奇怪的结果。是否有一些 parameters/arguments 专门控制 ScrollMagic 中固定元素的位置？

这是我的动画代码笔 - http://codepen.io/BillKroger/pen/bwNXZV（确保向下滚动）

非常感谢任何帮助！

Answer 1

好吧，我想出来了——我最终将 stage/graphics 包裹在一个额外的容器中，并给它一个顶部属性的相对定位。然后对于 Javascript 我只是向场景实例添加了一个偏移量，确保它等于应用于新容器的顶部位置属性。以下是所有更改：

HTML:

<div class="stage-wrapper">  <!-- new container -->
   <div class="stage">
      <div class="svg-image"></div>
      <div class="svg-image"></div>
      <div class="svg-image"></div>
   </div>
</div>

CSS:

.stage-wrapper {
   position: relative;
   top: 300px;
}

Javascript:

var scene = new ScrollMagic.Scene({
   triggerElement: "#how-it-works", 
   duration: 4000
})

.setPin(".stage")
.addTo(controller)
.setTween(scrollAnimation);

// add a scene offset amount equal to the top positioning for the new container
scene.offset(300);

更新的代码笔：http://codepen.io/BillKroger/pen/bwNXZV

这可能不是解决问题的唯一方法，但上述解决方案最终适用于我的情况。

ScrollMagic 的舞台定位问题

Stage positioning issue with ScrollMagic

jquery

scrollmagic

gsap