我对 Wow.js 和 Fullpage.js 有疑问。我已经设法让他们一起工作,这是脚本:
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
'navigationPosition': 'right',
scrollBar: true,
onLeave: function() {
new WOW().init();
}
});
//methods
$.fn.fullpage.setAllowScrolling(true);
});
<img class="portfolio-image wow animated fadeInLeft" data-wow-iteration="1">
我将数据迭代设置为 1,以防止它重复。
这是您可以看到实际效果的网站 lancewalkerdesign.com
但是,当我滚动到我的一个视口(viewport)时(我首页上的每个部分都是一个带有 ul 导航点的全屏部分。)动画会触发。当我向下滚动时,动画会在滚动条滚动到下一部分时再次触发。
我宁愿在进入视口(viewport)时只看到一次这个动画,无论是向下滚动还是向上滚动,而不是在它离开时再次看到。
有什么想法吗?
最佳答案
为什么要在 onLeave
回调中初始化 wow?
您可能只需要在页面加载时执行一次。
尝试在 afterRender
回调中只初始化一次:
$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
scrollBar: true,
afterRender: function() {
new WOW().init();
}
});
//methods
$.fn.fullpage.setAllowScrolling(true);
});
关于javascript - wow.js 和 fullpage.js 动画触发同时滚动到/离开视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55212656/