Fullpage.js。添加滚动延迟 [英] Fullpage.js. Adding a scroll delay
本文介绍了Fullpage.js。添加滚动延迟的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个divbox,当用户滚动到下一页时,使用.fp-viewing作为锚点逐渐淡出,以启动过渡效果。当触发.fp-viewing时,页面开始滚动,并在动画结束前将框滚动到视图之外。
I have a div "box" which fades gradually using ".fp-viewing" as an anchor to start the transition effect when a user scrolls to the next page. The thing is the page starts scrolling when .fp-viewing is triggered and scrolls box out of view before the finish of the animation.
当触发.fp-viewing直到box在4s内完成动画时,如何延迟滚动的开始?
How can I delay the start of the scrolling when .fp-viewing is triggered till box has done its animation in 4s?
.box{
transition: all 4s ease-out;
-webkit-transition: all 4s ease-out;
}
.fp-viewing-2 .box{
opacity: 0;
}
推荐答案
你可以玩这个选项fullpage.js提供取消之前的动作发生。
You can play with the option fullpage.js provides to cancel a movement before it takes place.
var delay = 2000; //milliseconds
var timeoutId;
var animationIsFinished = false;
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(origin, destination, direction){
var curTime = new Date().getTime();
//animating my element
$('#element').addClass('animate');
clearTimeout(timeoutId);
timeoutId = setTimeout(function(){
animationIsFinished = true;
fullpage_api.moveTo(destination.index + 1);
}, delay);
return animationIsFinished;
},
});
这篇关于Fullpage.js。添加滚动延迟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文