我是使用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的方法。
- 创建一个相对容器来保存绝对元素(不要这里忘记宽度和高度)
- 绝对不要直接使用"左"或"右"、"上"或"下"元素,也不要这样使用"%",它永远不适合你的需要
试试这个(以左翼为例):
-
给它的尺寸(宽度和高度,对于这个例子,我将使它x和y)
-
设置为left: 50%(这将定位元素的左侧)中心)
- 要在中心对齐,指定
margin-left: -x/2
(这将定位到)中心)
现在使用这种方法,使用步骤3(负边距值)来定位元素(注意:不要使用margin-left: -x/2
,这将只是居中,使用你需要的数字在px值)
使用scroll magic animate just margin
对顶部或底部值执行相同操作
希望对你有帮助