アニメーションが表示されているときにのみアニメーションを動作させる方法

Question

アニメーション要素が読み込まれると、最初のビューには表示されません。その特定の要素にスクロールすると、アニメーションは既に停止しています。ビューにはありますが、jqueryプラグインは一切ありません。そのような効果を得るためのJavaScript関数はありますか？ありがとうございます。

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

Answer 1

jQueryを使用せずに立ち去ることができるかもしれませんが、JavaScriptが必要です。あなたができる最善のことは、その中にスペース（スパン、DIVもの）を持つ要素を作成し、それをビューポートに

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。