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

Question

HTML 元素如何在出现在屏幕上时立即显示动画？

我在堆栈溢出上找到了一个例子tour page ，当您向下滚动到足够远时，信息元素就会滑入页面。这背后的诀窍是什么？

Answer 1

您需要使用 JavaScript 来检测视口(viewport)的位置并在它可见时将其激活。

您可以使用 JavaScript 来检测和执行过渡，然后使用 CSS 或 JavaScript 来制作动画。

有许多基于 jquery 的脚本可用于完成此操作。这是一个例子:

---

DEMO

---

1. 创建一个要检查它是否在视口(viewport)中的 Html 元素。

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

2.在文档末尾加载 jQuery javascript 库和 jQuery Viewport Checker 插件。

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

3.在此元素上调用插件并在 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