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

Question

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

所以我有一架飞机，其中的零件是 assembled 并在滚动上聚集在一起形成一架飞机。

例如-左翼、右翼、机体、机尾、左螺旋桨、右螺旋桨所有这些部分都是分开的，从不同的方向来形成飞机。

我已经设法在 1366x768 屏幕分辨率下完成这项工作。但是如果我以不同的屏幕分辨率打开它，这些部分不会 assemble 在正确的位置。 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 的方法。

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

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

给它尺寸（宽度和高度，对于这个例子我会做它 x 和 y)
左移：50%（这会将元素的左侧定位在中心)
将其对齐到中心分配 margin-left: -x/2（这会将其定位到中心）

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

并使用滚动魔法仅对边距进行动画处理

对最高值或最低值执行相同的操作

希望对您有所帮助

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

How to give position values for element to align perfectly at all screen resolutions?

html

javascript

jquery

parallax

scrollmagic