애니메이션보기가있는 경우에만 애니메이션을 만드는 방법

내 페이지가 애니메이션 요소를로드 할 때 첫 번째보기에 있지 않습니다. 특정 요소로 스크롤하면 애니메이션이 이미 중지되었습니다. 해당 요소가 실행될 때만 실행되는 애니메이션이 필요합니다. 보기에 있지만 jquery 플러그인이 없습니다. 그와 같은 간단한 JavaScript 함수가 있습니까? 사전에 감사드립니다.애니메이션보기가있는 경우에만 애니메이션을 만드는 방법

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

출처

2016-09-01 Juhi Mathur

질문을 주제어로 작성하십시오 : 디버깅 도움을 구하는 질문 ("**이 코드가 작동하지 않는 이유는 무엇입니까? **")는 다음을 포함해야합니다 : ► 원하는 동작, ► 특정 문제 또는 오류 * 질문 자체에 ** ** 그것을 재현하는 데 필요한 가장 짧은 코드 **. 분명한 문제 성명이없는 질문은 다른 독자에게 유용하지 않습니다. 참조 : "** [mcve] **를 만드는 방법", [여기에 대해 나는 어떤 주제를 물을 수 있습니까?] (http://stackoverflow.com/help/on-topic), [ask]. – Makyen

@HermLuna jquery 플러그인을 시도했지만 내 페이지의 다른 효과에 영향을 주며 애니메이션이 작동하지 않습니다. ( –

jQuery를 사용하지 않고도 빠져 나갈 수는 있지만 자바 스크립트가 필요합니다. 당신이 할 수있는 가장 좋은 방법은 그 공간 (범위, 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.

출처

2016-09-01 05:41:45 snit80

애니메이션보기가있는 경우에만 애니메이션을 만드는 방법

답변

관련 문제