HTML 元素如何在出现在屏幕上时立即显示动画?
我在堆栈溢出上找到了一个例子tour page ,当您向下滚动到足够远时,信息元素就会滑入页面。这背后的诀窍是什么?
最佳答案
您需要使用 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
关于javascript - 当元素出现在屏幕上时如何启动动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26667562/