스크롤 jquery CSS 애니메이션에 플라이 인 플라이 아웃 효과

Question

내 사이트 플라이 인 요소와 스크롤 플라이 아웃 요소를 만들려고합니다.

이것이 내가 찾고있는 효과입니다.

http://nizoapp.com/

nizo 사이트의 효과는 내가 Skrollr, scrollorama 및 JQuery와 애니메이션과와 CSS 전환이 효과 작업을 얻을 수있는 여러 가지 방법을 시도

생각, JQuery와 함께 이루어집니다 등 등 등

내가

많은 노력과 일부 차용 코드 후 (그것을 구글) "시트를 사기 CSS 애니메이션"에 의해 미친 CSS 전환을 사용하기로 결정

, 내가 가지고 그것을 반 가공용 ng로, 아래 스크롤에서 날아 날 수있는 요소를 얻을 수 있지만 스크롤 위로 날아 가지는 못합니다.

이

절반 내가 있는지 확인하는 또 다른 기능 (코드 청크)를 사용하여 시도

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop)); 
} 






$(window).scroll(function() { 

    $('.box').each(function (i) { 


     if (isScrolledIntoView(this)) { 

      $(this).addClass("slideRight"); 

     } 


    }); 

}); 




// this is the function to check if is scroll down or up, but I cannot get it to trigger the fly in effect, 

(function() { 
    var previousScroll = 0; 

    $(window).scroll(function() { 
     var currentScroll = $(this).scrollTop(); 
     if (currentScroll > previousScroll){ 

// i figure to put the fly-in code here 

     } 
     else { 



// and the fly-out code here  


     } 
     previousScroll = currentScroll; 
    }); 
}()); 

http://jsfiddle.net/mrcharis/Hjx3Z/4/

코드는입니다 ...... 작업이있는 jsfiddle입니다 스크롤 다운 또는 최대,하지만 기존 코드와 함께 작동시키지 수 없습니다.

내가 그것을 알아낼 수 있다면 나는 확실히 다른 사람이 알고 싶다, 어느 날 솔루션을 게시 할 예정입니다 좋은 하루

되세요 좋지 않을까이 작업을 얻을 수있는 어떤 도움

Answer 1

tympanus.net에서 코드를 빌려 쓰고 modernizer 라이브러리를 사용하여 this을 찾았습니다.

나는 다른 접근법을 시도했지만 모두 샘플 코드와 이미 제공된 현대화 프로그램 JS 라이브러리를 사용하는 최선의 방법을 찾았습니다.

Answer 2

위 또는 아래로 스크롤하는지 여부를 아는 것은 속임수가 아닙니다. 문제의 요소의 상단 오프셋을 사용하여 관계형으로 만듭니다. 그런 다음 대부분의 경우> 또는 <만큼 쉽습니다.

현재 방향을 얻고 싶다면 항상 마지막 스크롤 위치를 기록하고 현재 방향과 비교할 수 있습니다.

var before = 0; 
$(window).scroll(function(event){ 
    var now = $(this).scrollTop(); 
    if (now > before){ 
     //on down code 
    } else { 
     //on up code 
    } 
    before = now; 
}); 

마찬가지로 대답은 here입니다.

화면 크기와 요소 위치에 따라 이벤트를 트리거하므로 위 또는 아래 여부와 상관없이 앞뒤로 동일한 규칙을 따릅니다. 그런 식으로 위 또는 아래로 물어 보는 대신 스크롤하는 경우에만 묻고 그에 따라 실행합니다.

내가 당신을 위해 바이올린을 변경해야한다면, 당신이 원하는 것을 알려주십시오. 나는 그들이 tympanus.net 예제에서 한 끔찍한 일 때문에 바이올린만을 만들었습니다.당신은 간단한 작업을 수행하기 위해 튜토리얼을 만들지 않아도됩니다. 2 페이지의 js는 불필요한 것이며 "이봐, 이걸하고 싶어?"라는 지시를하지 않는다. 그런 다음 내가 모은이 것들을 복사하여 붙여 넣는다. 행동의 명확한 과정, 그리고 빨리 소화 할 수있는 너무 많은 코드 "를 제공합니다. 누구가 배워도 도움이되지 않습니다.