Question

我有9张幻灯片，其中包含3个元素，使用Greensock和Scrollmagic进行动画制作。目前，页面很长，如果我使用setPin()，所有元素都会变得疯狂。

以下是示例：

https://codepen.io/htmltuts/pen/prVVwK

我想要的是每当我滚动页面时，我希望页面位置相同，只有动画才能继续工作。 3个元素动画后，应该消失，其他3个位于相同的位置并开始相同的动画。

是否可以固定每个容器并在页面中保留滚动行为？

Answer 1

如果我理解你的意思，那么你的意思就是修好你的笔。

你可以打破动画元素＆amp;滚动触发元素

因此，创建一个用于触发动画的滚动/触发元素。（在我的示例中称为块＃，您可以使用css使其不可见）

然后创建一个固定元素以在

上设置动画

下面我简单的例子 https://codepen.io/ray1618/pen/XaqPQv

// init controller
var controller = new ScrollMagic.Controller();

var tween1 = new TimelineMax();
tween1.to('.fixedblock1', 1, {rotation: 180, ease:Power0.easeNone});

var tween2 = new TimelineMax();
tween2.to('.fixedblock2', 1, {rotation: 180, ease:Power0.easeNone});

var tween3 = new TimelineMax();
tween3.to('.fixedblock3', 1, {rotation: 180, ease:Power0.easeNone});

var triggerHookNum = 0.5;
var durationNum = "40%";

// build scene
var scene = new ScrollMagic.Scene({triggerElement: ".block1", offset: 50, triggerHook: triggerHookNum, duration: durationNum})  .setTween(tween1).addIndicators().addTo(controller);
var scene2 = new ScrollMagic.Scene({triggerElement: ".block2", triggerHook: triggerHookNum, duration: durationNum}).setTween(tween2).addIndicators().addTo(controller);
var scene3 = new ScrollMagic.Scene({triggerElement: ".block3", triggerHook: triggerHookNum, duration: durationNum}).setTween(tween3).addIndicators().addTo(controller);

如何使用ScrollMagic固定和重叠多个元素？

1 个答案: