如何在元素出现在屏幕上时启动动画？

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