gpt4 book ai didi

javascript - ScrollMagic 引脚在 TimelineMax 中不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 11:15:11 28 4
gpt4 key购买 nike

我是 ScrollMagic 的新手,但很喜欢它。

所以我有一个时间轴,它将飞机的各个部分组合在一起形成一架飞机。我打算将飞机的补间部分更改为整个飞机的单个图像,然后固定单个图像。

我已经设法将飞机的部件组装在一起,但不确定如何进行。

知道如何实现吗?

这是我到目前为止所取得的成就

HTML -

<section class="intro-container"></section>
<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:"50%" , top:"-150px" },0)
.to("#plane-right-wing", 1, {right:"50%" , top:"-150px"},0)
.to("#plane-body", 1, {top:"-250px"},0)
.to("#plane-tail", 1, {top:"-404px" },0.5)
.to("#plane-propeller-left", 1, {left:"50%" , top:"-230px" },0.5)
.to("#plane-propeller-right", 1, {right:"50%" , top:"-230px"},0.5);
var scene1 = new ScrollMagic.Scene({triggerElement: ".airplane-container" , duration: 300})
.setTween(airplane_tween)
// .setPin("#airplane-pin")
.addIndicators({name: "airplane"}); // add indicators (requires plugin)
// Add Scenes to ScrollMagic Controller
controller.addScene([
scene1
]);

CSS -

* {
margin: 0;
padding: 0;
}

html, body {
margin: 0;
height: 100%;
background: #ededed;
}

a {
color: #fff;
text-decoration: none;
}

a:hover {
text-decoration: none;
}

a.active {
color: #ededed;
}


.intro-container {
width: 100%;
height: 700px;
float: left;
background: #ffd134;
}
.airplane-container {
width: 100%;
/*height: 900px;*/
overflow: hidden;
float: left;
background: #678ecf;
background: rgba(103, 142, 207, 0.9) url(../images/top-view.jpg) no-repeat;
}
#plane-left-wing {
margin: 300px auto auto -252.5px;
position: relative;
float: left;
width: 231px;
height: 92px;
background: url(../images/plane-left-wing.png) no-repeat;
}

#plane-right-wing {
margin-top: 300px;
margin-right: -252.5px;
position: relative;
float: right;
width: 231px;
height: 92px;
background: url(../images/plane-right-wing.png) no-repeat;
}


#plane-propeller-left {
margin: 300px auto auto -130px;
position: relative;
float: left;
width: 92px;
height: 149px;
background: url(../images/plane-propeller-left.png) no-repeat;
}

#plane-propeller-right {
margin: 300px -130px auto auto;
position: relative;
float: right;
width: 92px;
height: 149px;
background: url(../images/plane-propeller-right.png) no-repeat;
}

#plane-body {
margin: 300px auto 0 auto;
position: relative;
z-index: 500;
width: 54px;
height: 333px;
background: url(../images/plane-body.png) no-repeat;
}

#plane-tail {
margin: 100px auto 0 auto;
position: relative;
width: 184px;
height: 52px;
background: url(../images/plane-tail.png) no-repeat;
}

这是一个相同的 fiddle - http://jsfiddle.net/joystan/x2f0atdj/

最佳答案

试试这个方法:

  1. 将平面图像放入文档中并赋予它opacity: 0
  2. 一旦你把它放在舞台上,给它相同的位置、宽度、高度等等,以适应你想要的位置
  3. 制作平面图像opacity: 1,然后制作零件opacity: 0

就是这样,如果你想固定平面图像,只需将position: fixed放在上面,你不需要让它固定

附言不要忘记保持动画边距不在左、上、下、右位置

干杯

关于javascript - ScrollMagic 引脚在 TimelineMax 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33296162/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com