如何延迟fullPage.js滚动？
如何延迟fullPage.js滚动？
提问于 2018-08-24 02:23:31
当用户在任意位置滚动时，我需要: 1.停止滚动2.将部分中的内容动画化3.触发滚动。
我找到的所有东西都是通过返回onLeave回调false来停止滚动。但在这种情况下，我不能稍后触发滚动。
new fullpage('#fullpage', {
licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: (origin, destination, direction) => {
// This disables scroll, but eliminates all
// the code below too. This is the only way
// to disable scroll I found in documentation.
return false;
// Here I suppose to do my animations
(() => {
$('.section').text('My fancy animations! Whoa!');
})();
// And nooow I need to resume the scroll as such
$('section *').one('webkitAnimationEnd oAnimationEnd msAnimationEnd animationend', () => {
if(direction === 'down') {
fullpage_api.moveSectionDown();
} else {
fullpage_api.moveSectionUp();
}
});
}
});.section {
text-align:center;
font-size: 3em;
}<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-24 03:53:37
所以我想你是在问如何将滚动延迟到某些动画完成之后。这里有一个有效的例子：https://jsfiddle.net/9w1tb85p/46/，你只需要添加额外的动画，并跟踪转换需要多长时间。
CSS
.section {
text-align:center;
font-size: 3em;
}HTML
<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section" id="section4">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>Javascript
var done = false;
var animationTimeout;
var transitionTimeout;
var animationTime = 1000;
var transitionTime = 500;
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(origin, destination, direction) {
if (done) return ;
//cancel any previous timeout as onLeave fires quite a bit.
clearTimeout(animationTimeout);
clearTimeout(transitionTimeout);
// do animations
$('.section').text('My fancy animations! Whoa!'+Math.random());
// after animation time scroll up or down
animationTimeout = setTimeout(()=>{
//deal with scroll
done = true;
if(direction === 'down') {
fullpage_api.moveSectionDown();
} else {
fullpage_api.moveSectionUp();
}
transitionTimeout=setTimeout(()=>done=false,transitionTime);
},animationTime);
return done;
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51992077
复制相关文章
相似问题