Fullpage.js。添加滚动延迟

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个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;
}

回答：

您可以使用fullpage.js" title="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;
    },
});

以上是 Fullpage.js。添加滚动延迟 的全部内容， 来源链接： utcz.com/qa/425339.html

回到顶部