FadeinLeft Bild scroll Wegpunkt

-1

Ich habe verschiedene Websites ausprobiert sogar versucht, Wegpunktführer zu entschlüsseln, aber kein Glück. Ich kann nicht scheinen, Scrollfunktion zu erhalten, um mit dem folgenden Code zu arbeiten. (Referenz: http://blog.robamador.com/using-animate-css-jquery-waypoints/)FadeinLeft Bild scroll Wegpunkt

Jede Hilfe wird sehr geschätzt.

<!doctype html><html><head><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css"> 

<style> 
img { 
margin:1000px 0; 
display:block; 

} 

</style> 

<script> 
//Animate from top 
$('.animated').waypoint(function() { 
$(this).toggleClass($(this).data('animated')); 
}, 
{ offset: 'bottom-in-view' }); 
//Animate from bottom 
$('.animated').waypoint(function() { 
$(this).toggleClass($(this).data('animated'));}); 
</script> 

<meta charset="UTF-8"> 
<title>Untitled Document</title> 
</head> 
<body> 
<img class="animated" data-animated="fadeInLeft" src="http://placekitten.com/g/200/300"> 
<img class="animated" data-animated="bounce" src="http://placekitten.com/g/200/300"> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"> </script> 
</body> 
</html>

Quelle

2016-04-24 Manny

Zunächst einmal setzen die jQuery-Skript und Waypoint-Skript Aufnahme in den HEAD-Tag. Dies ist in 99% der Fälle der richtige Weg, JavaScript-Bibliotheken in Ihr DOM einzubinden.

Zweite Sache: Sie schreiben Ihren Javascript-Code in den HEAD-Tag (es ist richtig), aber ohne eine "Startkontrolle". In Ihrem Fall startet der Browser Ihren JavaScript-Code, bevor er den Rest des DOMs liest. Daher kann er keine Ereignisse an die richtigen Elemente anhängen (die Bilder mit der Klasse "animiert"), weil sie diese noch nicht gelesen haben. In einfachen Worten, wenn der Browser beginnt, Ihr SCRIPT-Tag zu lesen, weiß er nicht, wer ".animated" ist, also tut es nichts.

Es gibt zwei Wege, Ihr Problem zu lösen:

1 - Bewegen Sie SCRIPT-Tag und seinen Inhalt am Ende des BODY-Tag.

2 - Wickeln Sie Javascript-Code in einem DOM.ready Zustand wie:

<script> 
     $(document).ready(function() { 

      //Animate from top 
      $('.animated').waypoint(function() { 
       $(this).toggleClass($(this).data('animated')); 
      }, { 
       offset : 'bottom-in-view' 
      }); 

      //Animate from bottom 
      $('.animated').waypoint(function() { 
       $(this).toggleClass($(this).data('animated')); 
      }); 
     }); 
    </script>

Ehrlich gesagt, ich ziehe die Option Nummer 2. = D

Quelle

2016-04-25 08:42:34

FadeinLeft Bild scroll Wegpunkt

Antwort

Verwandte Themen