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>