Wow js 无法使用 Fullpage 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 触发用于触发动画的滚动事件所需要的。

Wow js 无法使用 Fullpage JS

Wow js is not working with the Fullpage JS

javascript

animation

fullpage.js

wow.js