Question

我使用GreenSock和ScrollMagic创建了一个很好的动画，但我无法弄清楚如何调整舞台/图形的初始位置（在用户触发动画之前）。目前，我在一个带有'stage'类的容器元素上调用.setPin方法。这个stage元素在一个更大的父容器（＃how-it-works）里面，它是动画的triggerElement：

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

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

这是一个带动画的codepen - http://codepen.io/BillKroger/pen/bwNXZV（确保向下滚动）

非常感谢任何帮助！

Answer 1

好的，我能够搞清楚 - 我最终将舞台/图形包裹在一个额外的容器中，并使其与顶级属性相对定位。然后对于Javascript我刚刚向场景实例添加了一个偏移量，确保它等于应用于新容器的顶部位置属性。以下是所有变化：

HTML：

data spell6;
set spell4;
by caseid livaropnseq out notsorted ;
group + first.out;
if first.caseid then group=1;
if first.out then startdt=livarstrtdt ;
retain startdt;
if last.out;
enddt = livarenddt ;
format startdt enddt date9.;
*drop livarstrtdt livarenddt ;
run;

CSS：

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

使用Javascript：

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

更新了Codepen：http://codepen.io/BillKroger/pen/bwNXZV

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

ScrollMagic的舞台定位问题

1 个答案: