【问题标题】: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:falsescrollBar:true

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-10-06
      相关资源
      最近更新 更多