Wow js没有使用整个页面的JS。

Question

我在图像的页面上添加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);
});

Answer 1

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

通过这种方式，fullPage.js将使用滚动条滚动，这正是wow.js为了触发触发动画所使用的滚动事件所需要的。