如何使用ScrollMagic固定和重叠多个元素？
如何使用ScrollMagic固定和重叠多个元素？
提问于 2017-08-22 20:25:10
我有9张幻灯片，里面有3个元素，用Greensock和Scrollmagic制作动画。目前，页面非常长，如果我使用setPin()，所有的元素都会变得疯狂。
示例如下：
https://codepen.io/htmltuts/pen/prVVwK
我想要的是，每当我滚动页面，我希望页面位置是相同的，只有动画应该继续工作。在3个元素被动画后，应该消失，其他3个元素位于相同的位置，并开始相同的动画。
是否可以固定每个容器并将滚动行为保留在页面中？
回答 1
Stack Overflow用户
发布于 2017-08-22 22:55:21
如果我没理解错的话，你的意思是把你的笔杆修好。
您可以中断动画元素&滚动触发元素
因此，创建一个用于触发动画的滚动/触发器元素(在我的示例中称为block#，您可以使用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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45817601
复制相关文章
相似问题
腾讯云开发者
