暂停滚动到下一张“幻灯片”，直到所有动画都完成

Question

我正在为 Skrollr 滑块创建一个“有限的”视觉构建器。它允许用户构建由幻灯片（html section 标签）组成的滑块，这些幻灯片在页面上彼此下方，每张幻灯片包含许多应用了 Skrollr 数据属性/动画（关键帧？）的 html 元素。

有没有办法暂停该幻灯片（前进到下一张幻灯片），直到其所有内部元素都完成动画？

我知道示例 pausing.html 演示了我需要什么，但这些“幻灯片”已修复，可能会给我的用户带来问题。滑块将被放入大多数元素未固定的 WordPress 网站主题中。

由于幻灯片内容如此动态且不可预测，因此很难知道锁定滚动需要多长时间？希望有可能做到这一点吗？

我的困境的例子：

.... 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.)

Answer 1

在动画完成之前禁用下一个按钮，您可以在 CSS 动画完成后启用。 Here 是一篇解释如何跟踪 CSS 动画回调的文章。

Answer 2

请参考以下资源：

• 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>

我忘了_main.js 有额外的修改，他们用✓注释：

_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 );