wow.js 和 fullpage.js 动画在滚动到/滚出视口时触发

Question

我对 Wow.js 和 Fullpage.js 有疑问。我已经设法让他们一起工作，这是脚本：

$(document).ready(function() {
  $('#fullpage').fullpage({
    'navigation': true,
    'navigationPosition': 'right',
    scrollBar: true,
    onLeave: function() {
      new WOW().init();
    }
  });
  //methods
  $.fn.fullpage.setAllowScrolling(true);
});

<img class="portfolio-image wow animated fadeInLeft" data-wow-iteration="1">

我将数据迭代设置为 1，以防止它重复。

这是您可以看到实际效果的网站 lancewalkerdesign.com

但是，当我滚动到我的一个视口时（首页上的每个部分都是一个带有 ul 导航点的全屏部分。）动画会触发。当我向下滚动时，动画会在滚动条滚动到下一部分时再次触发。

我宁愿在进入视口时只看到一次这个动画，无论是向下滚动还是向上滚动，而不是在它离开时再次看到。

有什么想法吗？

Answer 1

为什么要在 onLeave 回调中初始化 wow？您可能只需要在页面加载时执行一次。

尝试在 afterRender 回调中只初始化一次：

$(document).ready(function() {
  $('#fullpage').fullpage({
    navigation: true,
    navigationPosition: 'right',
    scrollBar: true,
    afterRender: function() {
      new WOW().init();
    }
  });
  //methods
  $.fn.fullpage.setAllowScrolling(true);
});

wow.js 和 fullpage.js 动画在滚动到/滚出视口时触发

wow.js and fullpage.js animation firing on BOTH scroll into / out of viewport

html

javascript

css

fullpage.js

wow.js