如何给元素的位置值，以在所有屏幕分辨率完美对齐

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

本文关键字：屏幕 分辨率 对齐 完美 元素 位置      更新时间：2023-09-26

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

我尝试使用百分比代替固定px，但不能解决问题。请帮助!

这真的取决于方法，因为我看不到CSS(可能只在这部分使用CSS)，我不能告诉更多。说到这里，我将尝试向您解释我使用scrollMagic的方法。

  1. 创建一个相对容器来保存绝对元素(不要这里忘记宽度和高度)
  2. 绝对不要直接使用"左"或"右"、"上"或"下"元素，也不要这样使用"%"，它永远不适合你的需要

试试这个(以左翼为例):

  1. 给它的尺寸(宽度和高度，对于这个例子，我将使它x和y)

  2. 设置为left: 50%(这将定位元素的左侧)中心)

  3. 要在中心对齐，指定margin-left: -x/2(这将定位到)中心)

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

使用scroll magic animate just margin

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

希望对你有帮助

相关文章：