javascript - ScrollMagic 在不同窗口高度上的偏移

Question

我正在使用 ScrollMagic 来获取一些滚动动画。问题是我需要使用偏移量，以便动画在滚动的某个点触发，但这完全取决于窗口高度。

所以在我提供的示例中

https://jsfiddle.net/5tvrnfkx/12/

您可以看到滚动出来的框。 https://tppr.me/RpkVa

注意窗口高度 https://tppr.me/hoyhs尝试调整高度或预览面板的大小并运行。

所以在 426px 窗口高度下，它工作得很好。启动页面时不带框并滚动动画。

尝试增加高度并检查https://tppr.me/sYJ5a ，该框出现在开头。同样，如果减小高度，该框仅在滚动几次后才会出现。

所以我想知道是否有任何方法可以使偏移值动态化，以便在任何窗口高度下，动画都从页面滚动的完全相同的点开始。

Answer 1

是的，而不是使用 offset ，您可以使用triggerHook并将其设置为 0 (或非常接近)。

像这样:

jQuery(function() {

  var controller = new ScrollMagic.Controller();

    var tween = TweenMax.to("#boxAnim", 1, {className: "+=animate"});
    var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300, triggerHook: 0})
            .setTween(tween)
            .addTo(controller);


  var height = $(window).outerHeight();

  $('.height').append(height);
});