fullPage.js与wow.js动画

Question

我正在制作我的第一个网页，其中包含完整的页面和哇插件。我的问题是页面向下滚动后没有加载哇动画。我尝试在加载页面后向div添加动画类，但它不起作用。任何想法如何正确地做到这一点？这是我的代码初始化插件

  <script>
        $(document).ready(function() {
           $('#fullpage').fullpage({
              'afterLoad': function(anchorLink, index){
                 if(index == '2'){
                    $('#animation_content').addClass('wow lightSpeedIn');
                 }
              },
           });
        });
        new WOW().init();
    </script>

Answer 1

Wow.js取决于scroll事件。

Fullpage.js并不真正滚动页面（触发滚动事件），除非您使用autoScrolling:false中详述的选项scrollBar:true或the FAQ of fullpage.js。

如果您仍然想要使用没有任何选项的哇，唯一的解决方案是尝试使用fullpage.js的回调afterLoad或onLeave来为wow.js添加所需的类或数据。

这是关于它的fullpage.js github论坛中的一个主题：https://github.com/alvarotrigo/fullPage.js/issues/249

您还可以通过使用fullpage.js状态类来查看有关如何创建CSS 3动画的my video tutorial。

Answer 2

使用此：scrollBar：在设置中为true，然后在CSS集中

body,html{
    overflow: hidden !important;
}

然后wow.js会工作，你不会看到你设置为true的scrollBar :) MAGIC