当我的页面加载时,动画元素不在第一个 View 中。当我滚动到该特定元素时,动画已经停止。我想要一个仅在该元素在 View 中时运行的动画...但没有任何 jquery 插件.有没有简单的JavaScript函数可以实现这种效果?先谢谢了。
Here is my code < https://jsfiddle.net/6pxwgkro/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,就在您使用执行动画的类检查的元素下方。
关于javascript - 如何使动画仅在可见时工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39263330/