暂停滚动到下一个“幻灯片”，直到所有动画完成 [英] Pause Scrolling to Next 'Slide' till all Animations are complete
本文介绍了暂停滚动到下一个“幻灯片”，直到所有动画完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为Skrollr滑块创建一个受限的视觉构建器。它允许用户构建包含幻灯片（html 部分标签）的滑块，这些幻灯片在页面上彼此相邻，每个幻灯片包含许多具有Skrollr数据属性的html元素/动画（关键帧？）应用于它们。
有没有办法暂停幻灯片（前进到下一张幻灯片），直到其所有内部元素都完成动画为止？
我知道示例 pausing.html ，它证明了我需要的东西，但这些幻灯片是固定的这可能会给我的用户带来问题。滑块将被嵌入到WordPress网站主题中，大多数元素都不固定。
因为幻灯片内容太动态且不可预知，所以很难知道锁定滚动多久。希望它可以做到这一点？
我的困境的例子：
....一些常规的WordPress页面内容（导航栏，标题可能是帖子等）
< div id =skrollr-body>
//暂停此幻灯片滚动，直到所有子元素都完成其动画为止
//幻灯片子元素始终有相对动画（data-100-top =...NOT data -100 =...）
< section id =slide-1class =slide>
...很多其他元素
< / section>
< section id =slide-2class =slide>
...
< / section>
< section id =slide-3class =slide>
...
< / section>
< / div>
....一些常规的WordPress页面内容（页脚，也许是帖子等）
.promise（）和 $。when index.html
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title>演示 - 简单视差滚动教程< / title>
< meta name =descriptioncontent =>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0/>
< link rel =stylesheethref =css / normalize.css>
< link rel =stylesheethref =css / main.css>
< style>
body {
font-family：'Open Sans'，sans-serif;
}
.on {cursor：pointer;指针事件：自动; }
.off {cursor：not-allowed;指针事件：无; }
< / style>
< / head>
< body class =loading>
< div id =preload>
< img src =img / bcg_slide-1.jpg>
< img src =img / bcg_slide-2.jpg>
< img src =img / bcg_slide-3.jpg>
< img src =img / bcg_slide-4.jpg>
< / div>
< main>
< section id =slide-1class =homeSlide>
< div class =bcg>
< div class =hsContainer>
< button id =test> TEST< / button>
< div class =hsContent>
< span class =launch>< a class =offhref =＃slide-2>< hr />
< h2>简单视差滚动是...< / h2>< / a>< / span>
< / div>
< / div>
< / div>
< / section>
< section id =slide-2class =homeSlide>
< div class =bcg>
< div class =hsContainer>
< div class =hsContent>
< span class =launch>< a class =offhref =＃slide-3>< hr />
< h2>适用于讲故事的网站。< / h2>< / a>< / span>
< / div>
< / div>
< / div>
< / section>
< section id =slide-3class =homeSlide>
< div class =bcg>
< div class =hsContainer>
< div class =hsContent>
< span class =launch>< a class =offhref =＃slide-4>< hr />
< h2>现在开始创建自己的故事< / h2>< / a>< / span>
< / div>
< / div>
< / div>
< / section>
< section id =slide-4class =homeSlide>
< div class =bcg>
< div class =hsContainer>
< div class =hsContent>
< span class =launch>< a class =offhref =＃slide-1>< hr />
< h2>并分享我的。< / h2>< / a>< / span>
< / div>
< / div>
< / div>
< / section>
< / main>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"> ;</script>
< script> window.jQuery || document.write（'< script src =js / vendor / jquery-1.9.1.min.js>< \ / script>'）< / script>
< script src =js / imagesloaded.js>< / script>
< script src =js / skrollr.js>< / script>
< script src =js / skrollr.menu.min.js>< / script>
< script src =js / _main.js>< / script>
< script>
$（function（）{
/ *滚动和跳转链接最初被禁用* /
$（'html，body'）。css（{
' （'''）;
$（lnk）;'$'$'$'$'$'$'$' .removeAttr（'href'）;
/ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~ * /
/ *这个测试按钮（位于左上角）是模拟任何动画的开始和完成* /
/ * var效果是动画测试，可以将其替换为真实的动画。* /
/ *从这里您可以存储和启动动画并操作DOM，我不确定您是如何实现内容的动态（没有提供详细信息），但所有交互都暂停，并且是一个承诺为了支持你，你应该没有问题。 * /
$（'＃test'）。on（'click'，function（event）{
var effect = function（）{
return $（a）.fadeOut 800）.delay（1200）.fadeIn（1600）;
};
/ * ~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~ * /
/ *这是一个使用$ .when语句来恢复滚动的.promise和（function）（）{
$（a）。toggleClass（'off off'）;
$（'html，body'）。css（{
'overflow'：'auto'，
'height'：'auto'
}）;
$（lnk ）.attr（'href'，'＃slide-2'）;
}）;
}）;
}）;
< / script>
< / body>
< / html>
我忘记了对 _main.js ，他们用✓注释：
_main.js
（function（$）{
//设置变量
$ window = $（window）;
$ slide = $（'。homeSlide' ）;
$ body = $（'body'）;
// FadeIn所有部分
$ body.imagesLoaded（function（）{
setTimeout（function ）{
//调整段大小
adjustWindow（）;
//淡入节
$ body.removeClass（'loading'）。addClass （'loaded'）;
}，800）;
}）;
函数adjustWindow（）{
// Init Skrollr
//添加Skrollr和Skrollr菜单init✓
var s = skrollr.init（）;
skrollr.menu.init（s，{
animate：真
}）;
// Get窗口大小
winH = $ window.height（）;
//保持最小高度550
if（winH <= 550）{
winH = 550;
}
//调整幻灯片大小
$ slide.height（winH）;
//在调整我们的区域大小后刷新Skrollr
//添加Skrollr刷新✓
s.refresh（）;
$ b}）（jQuery）;
I am creating a 'limited' visual builder for Skrollr sliders. It allows the user to build sliders that consist of slides (html section tags) that sit one below each other on the page, each slide contains many html elements that have Skrollr data attributes/animations (keyframes?) applied to them.
Is there a way to pause that slides (advancement to the next slide) until all its inner elements have completed their animations?
I am aware of the example pausing.html that demonstrates kindof what I need but these 'slides' are fixed which could cause problems for my users. The sliders will be chucked into WordPress website themes where most elements are not fixed.
Because the slide contents are so dynamic and unpredictable its hard to know how long to lock scrolling? Hopefully its possible to do this?
Example of my dilemma:
.... Some regular WordPress page content (Navbar, Header maybe posts, etc.)
<div id="skrollr-body">
// Pause this slides scrolling till all child elements have completed their animations
// Slide child elements will ALWAYS have relative animations (data-100-top="..." NOT data-100="...")
<section id="slide-1" class="slide">
<p data-center="opacity: 1;" data-top="opacity: 0;">Some awesomeness</p>
<img data--100-center="transform: translate(-100%,0);" data-top="transform: translate(0,0);" src="..."/>
... lots of other elements
</section>
<section id="slide-2" class="slide">
...
</section>
<section id="slide-3" class="slide">
...
</section>
</div>
.... Some regular WordPress page content (Footer, maybe posts, etc.)
解决方案
Please refer to the following resources:
- Skrollr
- Skrollr Menu
- How to programmatically disable page scrolling with jQuery
- Skrollr Parallax Tutorial
- jQuery
.promise()and$.when
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo - Simple parallax scrolling tutorial</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
.on { cursor: pointer; pointer-events: auto; }
.off { cursor: not-allowed; pointer-events: none; }
</style>
</head>
<body class="loading">
<div id="preload">
<img src="img/bcg_slide-1.jpg">
<img src="img/bcg_slide-2.jpg">
<img src="img/bcg_slide-3.jpg">
<img src="img/bcg_slide-4.jpg">
</div>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<button id="test">TEST</button>
<div class="hsContent">
<span class="launch"><a class="off" href="#slide-2"><hr/>
<h2>Simple parallax scrolling is...</h2></a></span>
</div>
</div>
</div>
</section>
<section id="slide-2" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<span class="launch"><a class="off" href="#slide-3"><hr/>
<h2>great for story telling websites.</h2></a></span>
</div>
</div>
</div>
</section>
<section id="slide-3" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<span class="launch"><a class="off" href="#slide-4"><hr/>
<h2>Now go and create your own story</h2></a></span>
</div>
</div>
</div>
</section>
<section id="slide-4" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<span class="launch"><a class="off" href="#slide-1"><hr/>
<h2>and share mine.</h2></a></span>
</div>
</div>
</div>
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/imagesloaded.js"></script>
<script src="js/skrollr.js"></script>
<script src="js/skrollr.menu.min.js"></script>
<script src="js/_main.js"></script>
<script>
$(function() {
/* Scrolling and jump links are disabled initially */
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
var lnk = document.querySelector('a');
$(lnk).removeAttr('href');
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* This test button (located upper left corner), is to simulate the beginning and completion of any animation */
/* var effect is the animation test, which can be swapped out for your real animations. */
/* From here you can store and initiate animations and manipulate the DOM, I'm not sure how you implement content dynamically (no details provided), but with all interaction paused as it is and a promise to back you up, you should have no problems. */
$('#test').on('click', function(event) {
var effect = function() {
return $( "a" ).fadeOut( 800 ).delay( 1200 ).fadeIn( 1600 );
};
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* This is a .promise using a $.when statement which restores scrolling and links AFTER the animation is completed. */
$.when( effect() ).done(function() {
$("a").toggleClass('on off');
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});
$(lnk).attr('href', '#slide-2');
});
});
});
</script>
</body>
</html>
I forgot there's additional modifications to _main.js, they annotated with a ✓:
_main.js
( function( $ ) {
// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');
//FadeIn all sections
$body.imagesLoaded( function() {
setTimeout(function() {
// Resize sections
adjustWindow();
// Fade in sections
$body.removeClass('loading').addClass('loaded');
}, 800);
});
function adjustWindow(){
// Init Skrollr
// Added Skrollr and Skrollr Menu init ✓
var s = skrollr.init();
skrollr.menu.init(s, {
animate: true
});
// Get window size
winH = $window.height();
// Keep minimum height 550
if(winH <= 550) {
winH = 550;
}
// Resize our slides
$slide.height(winH);
// Refresh Skrollr after resizing our sections
// Added the Skrollr refresh ✓
s.refresh();
}
} )( jQuery );
这篇关于暂停滚动到下一个“幻灯片”，直到所有动画完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
