0

我是 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/

4

1 回答 1

1

try out this approach:

  1. Put image of plane in document and give it opacity: 0
  2. Once you have it on stage, give it same position, width, height, so on, so on, to fit where you want it
  3. make plane image opacity: 1, and than make parts opacity: 0

That's it, if you want plane image to be pinned, just put position: fixed on it, you don't need to make it pin

P.S. Don't forget to keep animating margins not left, top, bottom, right position

Cheers

于 2015-10-23T16:29:44.730 回答