如何在元素出現在屏幕上時啓動動畫？

Question

一旦HTML元素出現在屏幕上，它是如何動畫的？

我在堆棧溢出tour page上找到一個示例，其中一旦向下滾動足夠多，信息元素就會滑入頁面。這背後的訣竅是什麼？

Answer 1

您需要使用javascript來檢測視口的位置，並在視覺可見時將其激活。

您可以使用JavaScript檢測並執行轉換，然後使用css或javascript來執行動畫。

有許多基於jQuery的腳本可用於完成此操作。這裏有一個例子：

---

DEMO

---

1.創建你婉檢查它是否在視口中的HTML元素。

<div class="demo"></div> 

2.加載jQuery JavaScript庫和jQuery視口檢查器插件在您的文檔的末尾。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="viewportchecker.js"></script> 

通話這一內容的插件，做在JavaScript的東西。

<script> 
$(document).ready(function(){ 
$('.demo').viewportChecker({ 
// Class to add to the elements when they are visible 
classToAdd: 'visible', 

// The offset of the elements (let them appear earlier or later) 
offset: 100, 

// Add the possibility to remove the class if the elements are not visible 
repeat: false, 

// Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed 
callbackFunction: function(elem, action){} 
}); 
}); 
</script> 

---

DOWNLOAD THIS SCRIPT