2016-08-02 20 views
0

Ich bin Reveal diese Vorlage: https://startbootstrap.com/template-overviews/creative/ mit dem Plugin jQuery ScrollAnzeige Scroll-Animation nach jedem anderen

Reveal Wenn Sie auf dieser Seite sehen: https://blackrockdigital.github.io/startbootstrap-creative/#services

Die Animationen (Dimond, Papierflugzeug, Zeitungen und das Herz) werden nacheinander geladen. Symbol Nummer 2 beginnt zu animieren, wenn Nummer Eins fertig ist usw.

Wenn ich versuche, das Gleiche zu tun, werden alle Animationen gleichzeitig geladen.

JavaScript (hinzugefügt nur .sr-step der Vorlage)

// Initialize and Configure Scroll Reveal Animation 
window.sr = ScrollReveal(); 
sr.reveal('.sr-icons', { 
    duration: 600, 
    scale: 0.3, 
    distance: '0px' 
}, 200); 
sr.reveal('.sr-button', { 
    duration: 1000, 
    delay: 200 
}); 
sr.reveal('.sr-step', { 
    duration: 600, 
    delay: 200 
}); 
sr.reveal('.sr-contact', { 
    duration: 600, 
    scale: 0.3, 
    distance: '0px' 
}, 300); 

Und das ist mein html

   <div class="row"> 
        <div class="col-lg-3 col-md-6 sr-step"> 
          <h3 class="step-number">01</h3> 
          <div class="step-text"><p>Text text text text.</p> 
         </div> 
        </div> 
        <div class="col-lg-3 col-md-6 sr-step"> 
         <h3 class="step-number">02</h3> 
         <div class="step-text">Text text text text.</div> 
       </div> 
        <div class="col-lg-3 col-md-6 sr-step"> 
         <h3 class="step-number">03</h3> 
         <div class="step-text">Text text text text.</div> 
       </div> 
       <div class="col-lg-3 col-md-6 sr-step"> 
        <h3 class="step-number">04</h3> 
       <div class="step-text">Text text text text.</div> 
     </div> 
    </div> 

Antwort

0

die Verzögerung Gefunden auf 200

sr.reveal('.sr-icons', { 
    duration: 600, 
    scale: 0.3, 
    distance: '0px' 
}, 200);