CSS 및 jquery를 사용하여 스크롤 효과 적용

Question

이 페이지에서 사용 된 특수 스크롤 효과를 찾고 있습니다. http://www.lemonde.fr/ameriques/visuel/2014/10/10/voix-d-outretombe-les-derniers-mots-de-condamnes-a-mort-executes-au-texas_4501418_3222.html 스크롤하면 페이지가 스크롤을 따르지 않고 애니메이션을 따릅니다. 나는 그것을하는 방법을 모른다. jquery와 scroll 이벤트를 사용하려고 시도했지만 크롬에서는 작동하지만 사파리에서는 작동하지 않습니다. 예제보다 부드럽지 않습니다. 나는 스크롤 "속도"를 고려해야 만하지만 부드럽게하는 방법을 모르는 것 같아요.

어떻게해야할까요? (나는 플러그인보다는 설명을하고 싶지만, 모든 대답이 가장 환영 받는다.) 감사

Answer 1

이 개념은

1. 100 %, 높이 100 % 별도 페이지 (별도의 div의)에 사이트를 분할 어떤 JQuery와 슬라이더와 비슷한 (하지만 서로 다른 작은)는은 (기본적으로 하나의 div을 포함한다 보기 창);

2. CSS을 사용하면 스크롤러를 숨길 수 있습니다. 그런 다음 스크롤을 감지 창 스크롤 이벤트

   $(window).scroll(function(){ 
   
   }) 
   

3. 에 기능을 결합 아래 코드

   body{ 
       overflow:hidden; 
   } 
   

4. 를 사용합니다. 스크롤이 down 인 경우 스크롤이 up 인 경우 다음 페이지로 애니메이션을 적용한 다음 이전 페이지에도 애니메이션을 적용합니다. 는 스크롤 테스트하려면 아래의 코드를 사용하여 아래

   var lastScrollTop = 0; 
   $(window).scroll(function(event){ 
       var st = $(this).scrollTop(); 
       if (st > lastScrollTop){ 
        // downscroll code 
       } else { 
        // upscroll code 
       } 
       lastScrollTop = st; 
   }); 
   

   는

   var lastScrollTop = 0; 
   $(window).scroll(function(event){ 
       var st = $(this).scrollTop(); 
       if (st > lastScrollTop){ 
        $('html,body').animate({scrollTop : $('next div id').offset().top}) 
       } else { 
        $('html,body').animate({scrollTop : $('prev div id').offset().top}) 
       } 
       lastScrollTop = st; 
   });