FadeinLeft Image scroll Waypoint

-1

我曾嘗試過不同的網站，甚至試圖解碼航點指南，但沒有運氣。我似乎無法獲得滾動功能以使用下面的代碼。（參考：http://blog.robamador.com/using-animate-css-jquery-waypoints/）FadeinLeft Image scroll Waypoint

任何幫助將不勝感激。

<!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>

來源

2016-04-24 Manny

首先，將jQuery腳本和Waypoint腳本包含在HEAD標記中。在99％的情況下，這是將JavaScript庫包含在DOM中的正確方法。第二件事：你把你的JavaScript代碼寫在HEAD標籤中（這是正確的），但沒有「開始控制」。在你的情況下，瀏覽器開始執行你的JavaScript代碼，然後再閱讀其餘的DOM，所以它不能在正確的元素上添加事件（類爲「動畫」的圖像），因爲它還沒有讀取它們。簡而言之，當瀏覽器開始讀取SCRIPT標籤時，它不知道誰是「.animated」，所以它什麼都不做。

有解決您的問題，有兩種方式：

1 - 將你SCRIPT標籤和它在body標籤結束的內容。

2 - 總結你在一個DOM.ready狀態類似的JavaScript代碼：

<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>

說實話，我更喜歡選項編號2 = d

來源

2016-04-25 08:42:34

FadeinLeft Image scroll Waypoint

回答

相關問題