Wow js 无法使用 Fullpage JS
Wow js is not working with the 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 触发用于触发动画的滚动事件所需要的。
我在图像的页面加载中添加了 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 触发用于触发动画的滚动事件所需要的。