animate.css animiert, wenn die Seite geladen wird

Question

Ich benutze animate.css für meine Website und ich habe einen Bootstrap-Karussell-Schieberegler verwendet es wird auf Google gesucht und auf meiner Website platziert. Es funktioniert gut, aber danach meine animate.css funktioniert nicht richtig bedeutet alle animierten Elemente in der HTML-Seite animieren beim Laden der Seite. Beispiel: Ich benutze fadeInRight animierte Klasse unter der Seite, aber es funktioniert nicht, wenn ich Seite nach unten gehe und wenn ich die Seite bei diesem bestimmten Element aktualisieren, funktioniert es gut. Bitte lösen Sie dieses

please check the site

Answer 1

Wenn Sie wollen Animationen Reveal Wenn Sie Blättern, ist es das, was Sie suchen:

http://mynameismatthieu.com/WOW/

CSS-Animationen können nicht auf der Basis verzögert werden Scrollposition. Also, zuerst, müssen Sie herunterladen und schließen die wow.min.js Datei auf Ihrer Seite wie folgt aus:

<script src="js/wow.min.js"></script> 

<script> 
    new WOW().init(); 
</script> 

Und dann die Animation zu Ihrem HTML-Element hinzufügen, indem Sie die Klasse Hinzufügen ‚wow‘ vom Animations Namen in animate.css gefolgt:

<section class="wow slideInLeft"> 
</section> 

für erweiterte Optionen mehr im Zusammenhang mit der Verzögerung Timing usw., siehe: http://mynameismatthieu.com/WOW/docs.html

Answer 2

Sie können wow.js verwenden für Elemente animieren, wenn es ist im Ansichtsfensterbereich.
HTML:

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"> 
      </section> 

CSS:

<link rel="stylesheet" href="css/animate.css"> 

js:

<script src="js/wow.min.js"></script> 
      <script> 
      new WOW().init(); 
      </script> 

Kontrolle der jQuery-Plugin wow.js