javascript - 如何使动画仅在可见时工作

Question

当我的页面加载时，动画元素不在第一个 View 中。当我滚动到该特定元素时，动画已经停止。我想要一个仅在该元素在 View 中时运行的动画...但没有任何 jquery 插件.有没有简单的JavaScript函数可以实现这种效果？先谢谢了。

Here is my code < https://jsfiddle.net/6pxwgkro/1/ >

Answer 1

您可能不使用 jQuery 就可以摆脱困境，但您将需要 javascript。您可以做的最好的事情是创建一个带有空格的元素(span、div 任何东西)并使用以下代码检查它是否在视口(viewport)中

function amIVisible(elem) {
var top = elem.offsetTop;
var left = elem.offsetLeft;
var width = elem.offsetWidth;
var height = elem.offsetHeight;

while(elem.offsetParent) {
elem = elem.offsetParent;
top += elem.offsetTop;
left += elem.offsetLeft;
}

return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}

如果上述函数返回 true，则创建需要在 js 中进行动画处理的 div，就在您使用执行动画的类检查的元素下方。