해당 위치로 스크롤 할 때 jquery로 div에 애니메이션하기

사용자가 페이지를 스크롤 할 때 특정 div가 화면의 보이는 부분/중간에 나타나면 어떤 조치가 취해지는 jquery 기능이 필요합니다. 예 : Verelo.com. 아래로 스크롤하면 두 개의 아이콘이있는 glob과 검은 색 화살표가있는 jquery 애니메이션을 볼 수 있습니다. 비슷한 기능이 필요합니다. 나는 정확한 것을 기대하지는 않지만, 적어도 가장 가까운 것은있을 것입니다.해당 위치로 스크롤 할 때 jquery로 div에 애니메이션하기

내 노력을 위해, 나는이 예를 발견했다 : Verelo.com 그리고 인터넷 검색을했다. 그러나 아직 아무것도 찾지 못했습니다.

도와주세요.

출처

2012-06-14 Deepak Kumar

그들은 문서의 scroll 이벤트를 수신하고 요소의 위치와 비교하여 문서의 scrollTop을 계산합니다.

기본적으로 요소가 뷰포트에 있는지 (Y 축 스크롤 만 고려할 때) 고려해야 할 사항은 문서의 스크롤 위치, 뷰포트의 높이, 대상 요소의 위치 및 대상 요소의 높이를 지정합니다.

$(window).scroll(function() { 

    var scrollTop = $(document).scrollTop(); 
    var viewportHeight = $(window).height(); 

    var targetPosition = $('#target').position().top; 
    var targetHeight = $('#target').outerHeight(); 

    // viewport stretches from scrollTop to (scrollTop + viewportHeight) 

});

는 또한 .position().top 또는 .offset().top 당신을 위해 가장 적합한 지 요소가 배치 방법에 따라 알아 내야하고, 그이 스크롤되고 있는지에 대한 것입니다. 난 그냥 하하 여기이 질문에 대답

Demo

출처

2012-06-14 11:49:50

나는 약간의 작업 예제를 기대하고있다. :) –

@Deepak : 너, 헤이? 나는 단지 그 과정을 설명하려고 애썼다. 답변은 몇 가지 코드와 데모로 업데이트되었습니다. –

위대한 !!! .. +1 매력. 매력처럼. 한 가지 더 묻습니다. 기본적으로 4 개의 이미지가 있습니다. 이제는 div가 초점을 맞출 때마다 각 이미지가 일정량 후 애니메이션을 적용해야합니다. 예 : A.jpg, B.jpg, C.Jpg 있습니다. 이제 페이지를 스크롤하고 div가 foucs에있을 때 A.jpg의 첫 번째 부분이 B.jpg 및 C.jpg보다 애니메이션 처리되어야합니다. 나는 어떤 settimeout 함수 함수 나 그런 식으로 작동 할 수 있다고 생각한다. 그러나 한 가지 더 중요한 것은 한 번 움직여야한다는 것입니다. –

, if element in sight, do something

https://github.com/protonet/jquery.inview, 여기에 플러그인, 요소가보기에있을 때 결정하기 위해 당신에게 당신이 결합 할 수 트리거를 제공

출처

2012-06-14 11:50:44 Bryan

할 수있는 일은 자신의 사이트에서이 파일 http://www.verelo.com/js/themeFunctions.js의 출처를 분석하면 축소되지 않았으므로 그들이 어떻게하는지 파악할 수 있습니다.

다음은 그에서 필요한 기능의 목록은 파일 JS 창을 스크롤 할 때 그래서 scrollLogic();가 호출되고

$(window).scroll(function scrollDetection() { 
       scrollLogic(); 
       });

. 이제는 scrollLogic();의 기능이 있습니다. 이

function scrollLogic(){ 
    //If page is scrolled further than 100%, drop navigation menu from top and do a dance. Preferably an Irish River dance of sorts 
    if($(window).scrollTop() > howItWorksPosition) { 
     window.sliderTimerOn = 'false'; 
     clearInterval(intervalId); 

     if($(window).scrollTop() > howItWorksPosition && $(window).scrollTop() < featuresPosition) {btnClick('.howItWorks'); executeScene(); window.ourCustomersFrame = 'false';} 
....... 
}

howItWorksPosition

창은 그 DIV까지 스크롤 및 executeScene();가 일을 할 때 그들은 executeScene();를 호출

howItWorksOffset = $('#howItWorks').offset(); 
howItWorksPosition = howItWorksOffset.top -180;

를 사용하기 전에 계산 된 큰 나는 그것의 필요한 부분을 추가하고 생기. executeScene();을 확인하여 그들이 애니메이션을 어떻게하는지 볼 수 있습니다.

출처

2012-06-14 12:04:56

jQuery waypoints 플러그인은 당신을 위해 바로이 작업을 수행 : 요소의 상단이 뷰포트의 상단에서 50 픽셀 때 위의 예 핸들러 함수에서

$('.thing').waypoint(function(direction) { 
    // do stuff 
}, { offset: 50 })

가 실행됩니다. 방향 매개 변수를 사용하여 '아래'또는 '위로'스크롤 중인지 확인할 수 있습니다.

고급 옵션과 예제는 jquery waypoints docs page을 참조하십시오.

출처

2014-01-25 10:20:32 sepehr

해당 위치로 스크롤 할 때 jquery로 div에 애니메이션하기

답변

관련 문제