我正在做一个项目,我需要几个 div 飞入,然后在滚动时固定到屏幕上。我曾尝试将两者加在一起,这会导致 div 奇怪地跳来跳去。pin 和 tween 都可以完美地单独工作,但我无法让它们一起正常工作。有什么建议么?我在下面有一些代码块。
查询:
controller = new ScrollMagic();
var myTween = new TimelineMax()
.add(TweenMax.to("#myTarget", .5, {
top: "-=500"
autoAlpha: 1,
left: "+=300",
color: "#aaaaaa"
}));
new ScrollScene({triggerElement: "#myTrigger"})
.setTween(myTween)
.setPin('#myTarget')
.addTo(controller);
HTML:
<div id="myTrigger" class="space50"></div>
<div id="myTarget" class="label">Stuff</div>
CSS:
.space50 {
height: 50px;
}
.label {
border-radius: 8px;
display: inline-block;
position: relative;
text-align: center;
vertical-align: middle;
}