如何延迟 fullPage.js 滚动?
How to defer fullPage.js scroll?
当用户滚动到任何地方时,我需要:
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>
所以我想你是在问如何将滚动延迟到某些动画完成之后。这是一个工作示例: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;
}
});
当用户滚动到任何地方时,我需要: 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>
所以我想你是在问如何将滚动延迟到某些动画完成之后。这是一个工作示例: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;
}
});