javascript - ScrollMagic 引脚在 TimelineMax 中不起作用

Question

我是 ScrollMagic 的新手，但很喜欢它。

所以我有一个时间轴，它将飞机的各个部分组合在一起形成一架飞机。我打算将飞机的补间部分更改为整个飞机的单个图像，然后固定单个图像。

我已经设法将飞机的部件组装在一起，但不确定如何进行。

知道如何实现吗？

这是我到目前为止所取得的成就

HTML -

<section class="intro-container"></section>
<section class="airplane-container">
    <div id="plane-left-wing"></div>
    <div id="plane-right-wing"></div>
    <div id="plane-propeller-left"></div>
    <div id="plane-propeller-right"></div>
    <div id="plane-body"></div>
    <div id="plane-tail"></div>
</section>
<!--/airplane-container-->

JS-

var controller = new ScrollMagic.Controller();
    var airplane_tween = new TimelineMax()
                .to("#plane-left-wing", 1, {left:"50%" , top:"-150px"  },0)
                .to("#plane-right-wing", 1, {right:"50%" , top:"-150px"},0)
                .to("#plane-body", 1, {top:"-250px"},0)
                .to("#plane-tail", 1, {top:"-404px" },0.5)
                .to("#plane-propeller-left", 1, {left:"50%" , top:"-230px" },0.5)
                .to("#plane-propeller-right", 1, {right:"50%" , top:"-230px"},0.5);
var scene1 = new ScrollMagic.Scene({triggerElement: ".airplane-container" , duration: 300})
                .setTween(airplane_tween)
                // .setPin("#airplane-pin")
                .addIndicators({name: "airplane"}); // add indicators (requires plugin)
// Add Scenes to ScrollMagic Controller
controller.addScene([
  scene1
]);

CSS -

* {
    margin: 0;
    padding: 0;
}

html, body {
  margin: 0;
  height: 100%;
  background: #ededed;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a.active {
  color: #ededed;
}


.intro-container {
  width: 100%;
  height: 700px;
  float: left;
  background: #ffd134;
}
.airplane-container {
  width: 100%;
  /*height: 900px;*/
  overflow: hidden;
  float: left;
  background: #678ecf;
  background: rgba(103, 142, 207, 0.9) url(../images/top-view.jpg) no-repeat;
}
#plane-left-wing {
  margin: 300px auto auto -252.5px;
  position: relative;
  float: left;
  width: 231px;
  height: 92px;
  background: url(../images/plane-left-wing.png) no-repeat;
}

#plane-right-wing {
  margin-top: 300px;
  margin-right: -252.5px;
  position: relative;
  float: right;
  width: 231px;
  height: 92px;
  background: url(../images/plane-right-wing.png) no-repeat;
}


#plane-propeller-left  {
  margin: 300px auto auto -130px;
  position: relative;
  float: left;
  width: 92px;
  height: 149px;
  background: url(../images/plane-propeller-left.png) no-repeat;
}

#plane-propeller-right {
  margin: 300px -130px auto auto;
  position: relative;
  float: right;
  width: 92px;
  height: 149px;
  background: url(../images/plane-propeller-right.png) no-repeat;
}

#plane-body {
  margin: 300px auto 0 auto;
  position: relative;
  z-index: 500;
  width: 54px;
  height: 333px;
  background: url(../images/plane-body.png) no-repeat;
}

#plane-tail {
  margin: 100px auto 0 auto;
  position: relative;
  width: 184px;
  height: 52px;
  background: url(../images/plane-tail.png) no-repeat;
}

这是一个相同的 fiddle - http://jsfiddle.net/joystan/x2f0atdj/

Answer 1

试试这个方法:

1. 将平面图像放入文档中并赋予它opacity: 0
2. 一旦你把它放在舞台上，给它相同的位置、宽度、高度等等，以适应你想要的位置
3. 制作平面图像opacity: 1，然后制作零件opacity: 0

就是这样，如果你想固定平面图像，只需将position: fixed放在上面，你不需要让它固定

附言不要忘记保持动画边距不在左、上、下、右位置

干杯