fullPage.js 和 wow.js 动画答案

【问题标题】：fullPage.js with wow.js animationsfullPage.js 和 wow.js 动画
【发布时间】：2014-08-29 05:48:05
【问题描述】：

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

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

【问题讨论】：

你达到后载功能了吗？你可以在那里放一个断点并询问索引吗？小提琴怎么样？
好吧，当我将 alert('something') 放在 if 语句中时，它完全可以正常工作。

标签： javascript jquery fullpage.js wow.js

【解决方案1】：

在设置中使用这个：scrollBar:true 然后在你的 CSS 设置中使用

body,html{
    overflow: hidden !important;
}

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

【讨论】：

【解决方案2】：

Wow.js 依赖于 scroll 事件。

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

如果您仍然想在没有任何这些选项的情况下使用 wow，唯一的解决方案是尝试使用 fullpage.js 的回调 afterLoad 或 onLeave 添加所需的类或数据以使 wow.js 工作.

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

您还可以查看my video tutorial，了解如何使用 fullpage.js 状态类创建 CSS 3 动画。

【讨论】：