스크롤에 요소 애니메이트

Question

사용자가 페이지를 스크롤 할 때 div에 애니메이션을 적용하고 싶습니다. 사용자의 해상도는 그가 필요하기 전에 요소를 보여 충분히 큰 경우, "{경우 (POS> 100)"사용 :

var slide = jQuery(".apresentacao-spc-01"); 
var opening = false; 
var closing = false; 
var pos = jQuery(window).scrollTop(); 
jQuery(window).scroll(function() { 
    var pos = jQuery(window).scrollTop(); 
    console.log(pos); 
    if (pos > 100) { 

     if (!opening) { 

      opening = true; closing = false; 
      slide.stop().animate({ 
       'opacity': 1, 
       'margin-left': '0px' 
      }, 700, function() { 
       opening = false; 
      }); 

     } 


    } else { 
     if (!closing) { 
      closing = true; opening = false; 
      slide.stop().animate({ 
       'opacity': 0, 
       'margin-left': '-1000px' 
      }, 500, function() { 
       closing = false; 
      }); 

     } 
    } 
}); 

문제는 다음과 같습니다이 들어

, 나는이 코드를 구현 스크롤하면 페이지를 스크롤하지 않으면 요소가 표시되지 않습니다.

내 질문 : 요소가 표시 될 때 실행될 스크롤 애니메이션은 어떻게 얻을 수 있습니까?

가 내 말 : 요소가 페이지로드에 표시되는 경우, 애니메이션이 자동으로 시작 ... 요소가 페이지로드에 표시되지 않는 경우, 애니메이션 스크롤이 요소는 시작에 도달 기다립니다 ...

감사.

Answer 1

몇 가지 다른 작업을 수행 할 수 있습니다.

var viewportWidth = document.documentElement.clientWidth 
, viewportHeight = document.documentElement.clientHeight 

그리고이 요소가 다운 거리보다 키가 크다 경우 다음 애니메이션을 트리거 : 내 첫번째 생각은 다음과 같이와 뷰포트의 높이를 조회하는 것이 었습니다.

더 역동적 인 해결책은 요소가 페이지 뷰포트에 자동으로 있는지 확인하여 페이지에서 내용을 변경 한 경우 높이를 조정하는 것에 대해 걱정할 필요가없는 기능을 사용하는 것입니다.

function isElementInViewport (el) { 
var rect = el.getBoundingClientRect(); 

return (
    rect.top >= 0 && 
    rect.left >= 0 && 
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
); 
} 

은 this response입니다. 제공된 링크에 사용 안내서 및 추가 정보가 있습니다. 행운을 빈다!