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

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，这会只需将其居中，使用您需要的像素值)

通过滚动魔法，只为边距设置动画

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

希望这对您有帮助