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

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

Answer 1

尝试这种方法：

将平面图像放入文档并提供opacity: 0
一旦你在舞台上，给它相同的位置，宽度，高度，等等，以适应你想要的地方
制作平面图像opacity: 1，然后制作零件opacity: 0

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

P.S。不要忘记保持动画边距不是左，上，下，右位置

干杯

ScrollMagic引脚在TimelineMax中不起作用

1 个答案: