Fullpage.js添加滚动延迟

简介: Fullpage.js添加滚动延迟

如何解决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;
}

声明:地推任务网所有作品(图片、文字)均由用户自行上传分享,仅供网友学习交流。

相关文章
|
9月前
|
JavaScript
js 获取页面的滚动高度
js 获取页面的滚动高度
48 0
|
6天前
|
JavaScript UED
js得禁止页面滚动
js得禁止页面滚动
12 1
|
4月前
|
前端开发 JavaScript 定位技术
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
35 0
|
4月前
|
前端开发 JavaScript
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
|
4月前
|
移动开发 JavaScript 前端开发
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
28 0
|
9月前
|
JavaScript
JS原生代码编写获取当前页面高度和触发滚动事件
JS原生代码编写获取当前页面高度和触发滚动事件
|
10月前
|
JavaScript 前端开发
javascript插件:countUp.min.js数字滚动效果
javascript插件:countUp.min.js数字滚动效果
99 0
|
5月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
|
7月前
|
前端开发 JavaScript
|
8月前
|
JavaScript
无缝循环滚动图片的JS代码
无缝循环滚动图片的JS代码