Pausa Scorrimento fino a "Diapositiva" successiva fino a quando tutte le animazioni sono complete

Sto creando un visual builder 'limitato' per i cursori di Skrollr. Consente all'utente di creare dispositivi di scorrimento composti da diapositive (tag HTML section) che si trovano uno sotto l'altro nella pagina, ogni diapositiva contiene molti elementi HTML con attributi/animazioni di dati di Skrollr (fotogrammi chiave?) Applicati a tali diapositive.Pausa Scorrimento fino a "Diapositiva" successiva fino a quando tutte le animazioni sono complete

C'è un modo per mettere in pausa le diapositive (avanzamento alla diapositiva successiva) finché tutti i suoi elementi interni non hanno completato le loro animazioni?

Sono a conoscenza dell'esempio pausing.html che dimostra il tipo di ciò di cui ho bisogno ma queste "diapositive" sono fisse e potrebbero causare problemi ai miei utenti. I cursori saranno lanciati nei temi del sito Web di WordPress in cui la maggior parte degli elementi non sono corretti.

Poiché il contenuto della diapositiva è così dinamico e imprevedibile, è difficile sapere per quanto tempo bloccare lo scorrimento? Speriamo che sia possibile farlo?

esempio del mio 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.)

fonte

2015-08-26 Jake M

Potete impostare una demo del codice per noi a giocare in giro? –

un jsFiddle ti aiuterà. Tutte le animazioni secondarie iniziano allo stesso tempo e hanno tutte lo stesso tempo di animazione? Stai usando jQuery per chiamare l'animazione o la stai basando su puro CSS? –

sta scorrendo manualmente, cioè vuoi bloccare l'utente dallo scorrimento fino a quando le animazioni sono complete, o automatico, vale a dire che la prossima diapositiva scorrerà subito dopo che le animazioni saranno completate? –

disattivare il pulsante accanto fino alla completa animazione, è possibile attivare dopo l'animazione CSS completo. Here è un articolo che spiega come monitorare la callback dell'animazione CSS.

fonte

2015-08-30 05:53:13

visitare: https://arcx.s3.amazonaws.com/sk/index.html

~~Non ci sono commenti nel file index.html che spiegano quello che ho fatto.~~

Si prega di fare riferimento alle seguenti risorse:

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>

ho dimenticato c'è ulteriori modifiche al _main.js, hanno annotato con un ✓:

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

~~È possibile scaricare l'intero demo qui: https://arcx.s3.amazonaws.com/sk/simple-parallax-scrolling-tutorial-s.zip~~

Ci sono 2 file che ho modificato dal original: index.html e _main.js

fonte

2015-08-30 11:42:49 zer00ne

Pausa Scorrimento fino a "Diapositiva" successiva fino a quando tutte le animazioni sono complete

risposta

Problemi correlati