ScrollMagic

Question

我只想在 div 第一次滚动到视图时将 class 添加到 div，然后将其保留在那里。（所以，我不想切换它 - 只需触发一次）。我有一个基于向父级 div 添加 class 的动画，即使我指定了一个方向，当我在检查器中检查它时，它仍然删除了相反的 class滚动。我不希望动画每次滚动时都运行，但只有第一次（然后在完成动画状态下停留在那里）。

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
triggerElement: '#intro',
offset: 50
})
.on("start", function(e) { 
    if (e.scrollDirection === "FORWARD") {
        $('#welcome').addClass('animated');}
    })
.addTo(controller);

我确实尝试添加持续时间，但没有效果。有什么建议吗？

Answer 1

是的，您可以在场景中添加 .reverse(false)。这将使动画只发生一次，因此如果您向上滚动它不会关闭 class。

这是一个如何使用它的示例，下面是一个 link 一个非常简单的使用它的演示。此外，有关更多信息，请参阅文档的另一个 link。

reverse(false)

$(document).ready(function(){
  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
    triggerElement: '.title',
    triggerHook: .6
  })
  .setClassToggle('.title', 'animate')
  .reverse(false)
  .addIndicators()
  .addTo(controller);

});

CodePen Demo

ScrollMagic - 永久添加 class，向上滚动时不删除

ScrollMagic - Add class permanently, not remove when scrolling back up