Fullpage.js.添加滚动延迟

Fullpage.js. Adding a scroll delay

本文关键字：延迟 滚动 添加 js Fullpage      更新时间：2023-09-26

我有一个div"box"，当用户滚动到下一页时，它会使用".fp viewing"作为锚点来开始过渡效果。问题是，当触发.fp查看时，页面开始滚动，并在动画结束前将框滚动出视图。

当.fp查看被触发时，我如何延迟滚动的开始，直到盒子在4s内完成动画？

.box{
  transition: all 4s ease-out;
  -webkit-transition: all 4s ease-out;
}
.fp-viewing-2 .box{
  opacity: 0;
}

您可以使用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;
    },
});


#fullpage {
    transition-delay: 1s !important;
}

或修改函数addAnimation在fullpage.js 中

对我来说，这是一个变体：

$(elem).fullpage({ 
/// opttions, 
onLeave: function(origin, destination, direction){ 
if(animationIsFinished === false){ 
// do some code 
} 
clearTimeout(timeoutId); 
timeoutId = setTimeout(function(){ 
animationIsFinished = true;
 $.fn.fullpage.moveTo(destination); 
   setTimeout(() => { 
     animationIsFinished = false; 
   }, 200); 
}, 600); 
return animationIsFinished;

这既便宜又简单，但我只是将我需要的Full Page函数包装在自定义函数包装器中，然后在准备好时使用settimeout（这个答案）来启动它。

function slideWithDelay() {
    fullpage_api.moveSlideRight();
}
// Change slide on select
$('select').on('change',function(){
    setTimeout(slideWithDelay, 500);
})
相关文章：