Javascript 如何使动画仅在视图中工作

当我的页面加载时，动画元素不在第一视图中。当我滚动到该特定元素时，动画已经停止。我想要一个仅在该元素处于视图中时运行的动画…但没有任何jquery插件。是否有任何简单的JavaScript函数用于此效果？请提前感谢

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

这是我的代码

您可能不需要使用jQuery就可以离开，但您需要javascript。您可以做的最好的事情是创建一个元素，其中包含一个空格（span，div anything），并使用以下代码检查它是否在视口中

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
);
}

功能不可见（elem）{
var top=元素偏移量；
var left=元素偏移量left；
变量宽度=元素偏移网络宽度；
var高度=离地高度；
while（元素offsetParent）{
elem=elem.offsetParent；
top+=元素偏移量；
左+=元素偏移左；
}
返回(
顶部<（window.pageYOffset+window.innerHeight）&&
左<（window.pageXOffset+window.innerWidth）&&
（顶部+高度）>window.pageYOffset&&
（左+宽）>window.pageXOffset
);
}

---

如果上述函数返回true，则在与制作动画的类一起检查的元素下方创建需要在js中命名的div。

请将问题放在主题：寻求调试帮助的问题（“此代码为什么不工作？”）中，必须包括：►想要的行为，►特定的问题或错误，以及►在问题本身中复制它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建”，以及。@HermLuna我尝试了jquery插件，但它会影响页面的其他效果，甚至动画也不起作用：(