Wow js 不适用于 Fullpage JS

问题描述

我正在图像的页面加载中添加 ZoomIn 动画。但是由于 FullpageJS，动画无法正常工作。

这是我的代码

HTML 代码：

<div class="wow zoomIn" data-wow-duration="0.5s" data-wow-delay="0.2s">
   <img src="images/image-3.jpg" alt="..." class="img-fluid">
</div> 

JS 代码：

$(function () {
    new WOW().init();
});

$(document).ready(function () {
        // Options
        $('#fullpage').fullpage({
            autoScrolling: true,scrollHorizontally: true,scrollingSpeed: 1300,scrolloverflow: true,navigation: true,navigationPosition: 'right',slidesNavigation: true,afterRender: function () {
                new WOW().init();
            },afterLoad: function () {
                new WOW().init();
            }
        });
        //methods
        $.fn.fullpage.setAllowScrolling(true);
});

解决方法

您需要在初始化时使用 fullpage.js 选项 scrollBar:true。

这样 fullPage.js 将使用滚动条滚动，这是 wow.js 需要的滚动条，以便触发它用来触发动画的滚动事件。