1

我正在做一个项目，我需要几个 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;
}
4

1 回答 1

4

为 pin 目标设置动画不是一个好主意。原因是进行了许多计算以确保元素在 pin 期间出现在正确的位置。简单的解决方案是在您的元素周围制作一个包装器并将其固定。包装器（动画）内部发生的事情是分开的，所以没问题。:)

如需更多帮助，请遵循本指南：https ://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md

于 2014-08-11T11:21:58.660 回答