Question

我第一次使用ScrollMagic，据我所知，我了解如何根据起始元素和持续时间触发动画

是否可以设置结束触发而不是持续时间？

var smcontroller = new ScrollMagic.Controller();
var smscene1 = new ScrollMagic.Scene({
    triggerElement: "#products-box-1", 
    offset: 200, duration: 1600
})
.setTween(tweencan)
.addIndicators()
.addTo(smcontroller);

Answer 1

您可以将持续时间设置为某个div的长度。

持续时间：$（＆＃34; #divid＆＃34;）。height（）

参考：Scrollmagic duration

Answer 2

我发现的最好的方法是通过获取您尝试对齐的元素的高度和偏移量来计算从页面顶部到文档中该点的像素数，并将像素减去要滚动的元素的顶部及其高度。

例如，如果您有一个包含<div class="rail">的右栏，您想要在<container class="content">旁边滚动，并且您希望该对象向下滚动到“内容”的底部：

duration = ($("content").offset().top + $("content").height()) - ($("rail").offset().top + $("rail").height().top);

一旦你看到这一点似乎很简单，但是在我意识到这很容易之前，我试图弄清楚如何做你想做的事情，我绞尽脑汁待了一小时。

Scrollmagic添加结束触发器

2 个答案: