mediafire.com과 같은 섹션에 마우스 휠 스크롤을 만드는 방법

Question

이 웹 사이트 http://www.mediafire.com/의 홈 페이지를 보았습니다.이 페이지에서 마우스 휠을 움직이면 페이지 위치가 자동으로 페이지의 다음 섹션으로 넘어갑니다. 나는 그것이 어떻게 이루어 졌는지 알고 싶다. 누구든지 이걸 도와 줄 수 있어요. 미리 감사드립니다.

감사합니다, Aswin

Answer 1

나는 애니메이션이 유형의 jQuery를 새로운 특히 사람에 걸릴 아마도 하드라고 생각합니다. 여기에는 스크롤링, 마우스 휠 이벤트 잡기, 애니메이션 지연 등이 포함되며, 대부분 크로스 브라우저 및 모바일 브라우저의 스 와이프 및 터치 이벤트에서 제대로 작동하도록합니다. 확실한 이해가 없다면 플러그인을 사용하는 것이 좋습니다. 이 두 가지가 가장 좋습니다 : One Page Scroll 및 Full Page.

크로스 브라우저에서이 작업을 수행하는 방법에 대한 기본 방법 만 보여줄 수 있습니다. 모바일에서 제대로 작동하려면 파트를 수행하고 스 와이프 및 터치 이벤트를 추가해야합니다. :) 여기

//Set each section's height equals to the window height 
$('section').height($(window).height()); 
/*set the class 'active' to the first element 
this will serve as our indicator*/ 
$('section').first().addClass('active'); 

/* handle the mousewheel event together with 
DOMMouseScroll to work on cross browser */ 
$(document).on('mousewheel DOMMouseScroll', function (e) { 
    e.preventDefault();//prevent the default mousewheel scrolling 
    var active = $('section.active'); 
    //get the delta to determine the mousewheel scrol UP and DOWN 
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1; 

    //if the delta value is negative, the user is scrolling down 
    if (delta < 0) { 
     //mousewheel down handler 
     next = active.next(); 
     //check if the next section exist and animate the anchoring 
     if (next.length) { 
      /*setTimeout is here to prevent the scrolling animation 
      to jump to the topmost or bottom when 
      the user scrolled very fast.*/ 
      var timer = setTimeout(function() { 
       /* animate the scrollTop by passing 
       the elements offset top value */ 
       $('body, html').animate({ 
        scrollTop: next.offset().top 
       }, 'slow'); 

       // move the indicator 'active' class 
       next.addClass('active') 
        .siblings().removeClass('active'); 

       clearTimeout(timer); 
      }, 800); 
     } 

    } else { 
     //mousewheel up handler 
     /*similar logic to the mousewheel down handler 
     except that we are animate the anchoring 
     to the previous sibling element*/ 
     prev = active.prev(); 

     if (prev.length) { 
      var timer = setTimeout(function() { 
       $('body, html').animate({ 
        scrollTop: prev.offset().top 
       }, 'slow'); 

       prev.addClass('active') 
        .siblings().removeClass('active'); 

       clearTimeout(timer); 
      }, 800); 
     } 

    } 
}); 

는 데모입니다 : jsfiddle.net/NGj7F/

그것은 [fullpage.js]와 함께 할 수