0

我正在使用ScrollMagic让动画在滚动时发生。我不是很精通这个，还在学习过程中。

所以我有一架飞机，它的零件被拆卸并在卷轴上组合在一起，形成一架飞机。

例如 - 左翼，右翼，飞机机身，尾翼，左螺旋桨，右螺旋桨所有这些部分都是分开的并且来自不同的方向以形成飞机。

我已经设法在 1366x768 屏幕分辨率下完成这项工作。但是如果我以不同的屏幕分辨率打开它，部件就不会在正确的位置组装。 http://jsfiddle.net/jv5s6f0j/1/

HTML - （每个 ID 都有一个背景图片）

<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:"31.2%" , top:"-18%"  },0)
            .to("#plane-right-wing", 1, {right:"31.2%" , top:"-18%"},0)
            .to("#plane-body", 1, {top:"-30%"},0)
            .to("#plane-tail", 1, {top:"-48%" },0.5)
            .to("#plane-propeller-left", 1, {left:"19%" , top:"-22%" },0)
            .to("#plane-propeller-right", 1, {right:"19%" , top:"-22%"},0) ;


var scene1 = new ScrollMagic.Scene({triggerElement: ".airplane-container" , duration: 200})
            .setTween(airplane_tween)
            // .setPin("section.airplane-container")
            // .addIndicators({name: "timeline"}) // add indicators (requires plugin)
            .addTo(controller);

我尝试使用百分比而不是固定像素，但没有解决问题。请帮忙！

4

1 回答 1

2

嗯，它真的取决于方法，因为我看不到 CSS（也许只把 css 放在这部分）我不能说更多。说到这里，我将尝试向您解释我使用 scrollMagic 的方法。

  1. 制作将容纳您的绝对元素的相对容器（不要忘记此处的宽度和高度）
  2. 不要在绝对元素上直接使用left或right，top或bottom，也不要使用'％'那样，它永远不会满足您的需求

试试这个（左翼的例子）：

  1. 给它尺寸（宽度和高度，对于这个例子，我将它设为 x 和 y）

  2. 给它左边：50%（这会将元素的左侧定位在中心）

  3. 将其对齐中心分配margin-left: -x/2（这会将其定位到中心）

现在使用这种方法，使用第 3 步（负边距值）来定位元素（注意：不要使用 margin-left: -x/2，这只会居中，使用 px 值中你需要的数字）

并使用滚动魔术动画仅边距

对顶部或底部值执行相同的操作

希望对你有帮助

于 2015-10-20T10:01:50.517 回答