如何使动画仅在可见时起作用

Question

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

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

Answer 1

You might be able to get away without using jQuery but you will need javascript. The best thing that you can do is create an element with a space in it (span, div anything) and use the following code to check if it is in 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
);
}

and if the above function returns true then create the div which needs to be aninamted in js just below the element you checked with a class which does the animation.