不同窗口高度上的 ScrollMagic 偏移

Question

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

所以在我提供的示例中

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

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

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

所以在426px 窗口高度下，它可以完美运行。以无框的方式启动页面并在滚动时显示动画。

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

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

Answer 1

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

像这样：

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);
});