如何解决Fullpage.js添加滚动延迟?
您可以使用fullpage.js提供的选项来取消运动。
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;
},
});
解决方法
我有一个div“框”,当用户滚动到下一页时,它会逐渐使用“ .fp-viewing”作为锚点淡入淡出以开始过渡效果。问题是,当触发.fp-
viewing时,页面开始滚动,并且在动画结束之前将框滚动出视图。
触发.fp-viewing时,如何延迟滚动开始,直到box在4s内完成动画播放?
.box{
transition: all 4s ease-out;
-webkit-transition: all 4s ease-out;
}
.fp-viewing-2 .box{
opacity: 0;
}
声明:地推任务网所有作品(图片、文字)均由用户自行上传分享,仅供网友学习交流。