Pause Scrollen zum nächsten "Slide" bis alle Animationen fertig sind

Ich erstelle einen 'limitierten' visuellen Builder für Skollr Schieberegler. Es erlaubt dem Benutzer, Schieberegler zu erstellen, die aus Folien bestehen (html section Tags), die untereinander auf der Seite sitzen, jede Folie enthält viele HTML-Elemente, auf die Skollr-Datenattribute/Animationen (Keyframes?) Angewendet werden.Pause Scrollen zum nächsten "Slide" bis alle Animationen fertig sind

Gibt es eine Möglichkeit, diese Folien anzuhalten (zur nächsten Folie zu verschieben), bis alle ihre inneren Elemente ihre Animationen abgeschlossen haben?

Ich bin mir des Beispiels pausing.html bewusst, das zeigt, was ich brauche, aber diese "Slides" sind behoben, die Probleme für meine Benutzer verursachen könnten. Die Schieberegler werden in WordPress-Website-Themen eingefügt, in denen die meisten Elemente nicht fixiert sind.

Da der Inhalt der Folie so dynamisch und unberechenbar ist, ist es schwierig zu wissen, wie lange das Scrollen blockiert werden soll. Hoffentlich ist es möglich, dies zu tun?

Beispiel für mein 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.)

Quelle

2015-08-26 Jake M

Können Sie Setup eine Demo Ihres Codes für uns um zu spielen? –

ein jsFiddle wird helfen. Starten alle Subanimationen gleichzeitig und haben alle dieselbe Animationszeit? Verwenden Sie jQuery zum Aufruf der Animation oder basieren Sie auf reinem CSS? –

ist das manuelle Scrollen, d.h. Sie möchten den Benutzer daran hindern zu scrollen, bis die Animationen vollständig oder automatisch sind, d. H. Die nächste Folie wird sofort nach Beendigung der Animationen scrollen? –

Deaktivieren Sie die nächste Taste, bis die Animation abgeschlossen ist, können Sie nach dem CSS-Animation vollständig aktivieren. Here ist ein Artikel, in dem erläutert wird, wie der Rückruf von CSS-Animationen verfolgt wird.

Quelle

2015-08-30 05:53:13

Bitte besuchen Sie: https://arcx.s3.amazonaws.com/sk/index.html

~~Es gibt Kommentare in der index.html Datei zu erklären, was ich tat.~~

Bitte beachten Sie die folgenden Ressourcen:

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>

ich _main.js zusätzliche Modifikationen vergaß es, sie mit einem ✓ kommentierten:

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

~~Sie können die ganze Demo herunterladen hier: https://arcx.s3.amazonaws.com/sk/simple-parallax-scrolling-tutorial-s.zip~~

Da ist 2-Dateien, die ich aus dem original geändert: index.html und _main.js

Quelle

2015-08-30 11:42:49 zer00ne

Pause Scrollen zum nächsten "Slide" bis alle Animationen fertig sind

Antwort

Verwandte Themen