이 웹 사이트와 같은 스크롤을 기반으로 애니메이션을 만드는 방법은 무엇입니까?

Question

나는 최근에 당신이 방 문 앞에 서있는 사람이이 웹 사이트의 말에 알 수 있습니다 본 웹 사이트

http://estimote.com/

먼저 건너. "실용적인 응용 프로그램은 무엇입니까?"라는 키워드를 검색 할 수 있습니다. 그 장소를 찾을 수 있습니다.

사용자가 마우스를 스크롤 할 때 화면에는 스크롤에 대한 반응 기반이 있는데, 예를 들어이 웹 사이트에서는 사람이 실내에서 걸을 때, 사용자가 아래로 스크롤하면 다른 쪽에서 , 사용자가 다른면을 스크롤하면, 사람은 방을 나간다.

이미지 URL을 변경하면 효과가있는 것 같습니다. 더 구체적인 질문을하고 싶습니다. 스크롤 이벤트를 무시하고 함수를 실행하는 방법은 무엇입니까?

감사

Answer 1

당신이 developertools를 보면 당신은 당신이 언급 한 바와 같이 그들이 이미지를 변경하는 것을 볼 수 있습니다.
는이 같은 것을 사용, jQuery를 함께이 다시 수 :

$(function(){ 
    $(window).scroll(function() 
    { 
    var aTop = $('#animationContainer').height(); 
    var framesShown = 0; 
    var framesTotal = 10; 

    if($(this).scrollTop()>=aTop){ 
     if(framesShown != framesTotal) 
     { 
      e.preventDefault() 
      showNextFrame(framesShown + 1); 
      framesShown++; 
     } 
    } 
    }); 
}); 

이 코드는이 링크