如何为元素提供位置值以在所有屏幕分辨率下完美对齐？

Question

我使用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);

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

Answer 1

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

1. 制作将容纳绝对元素的相对容器（不要 在这里忘记宽度和高度）
2. 不要在绝对值上直接使用左或右、顶部或底部 元素，也不要那样使用 '%'，它永远不适合你的 需要

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

1. 给它尺寸（宽度和高度，对于这个例子，我会做 x 和 y)

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

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

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

并且使用滚动魔法只为边距设置动画

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

希望对你有帮助