easeInCirc 효과가 포함 된 전체 페이지 마우스 휠 스크롤

섹션을 내 HTML 페이지에 제공하면 각 섹션의 화면 크기가 100 % 너비와 높이가됩니다. 내가 스크롤바를 보여주고 싶지 않기 때문에 본문과 섹션 오버플로가 숨겨져 있습니다. 그것 대신에, 나는 섹션들 사이의 네비게이션을 위해 메뉴와 마우스 휠을 사용하고 싶습니다.easeInCirc 효과가 포함 된 전체 페이지 마우스 휠 스크롤

문제는 스크립트를 한 번에 한 섹션 (100 % 높이)으로 스크롤해야한다는 것을 그물에서 발견 한 스크립트를 어떻게 적응시켜야할지 모르겠다 ... 내 스크립트를 수정할 수 있다면 :

$(document).ready(function() { 
    $('body').mousewheel(function(event, delta) { 
     if (delta < 0) { 
      $('body').scrollTo('+=800', 1500, {easing : 'easeInCirc'}); 
     } 
     else { 
      $('body').scrollTo('-=800', 1500, {easing : 'easeInCirc'}); 
     } 
    return false; 
    }); 
});

은 (내가 + = 800 및 표시 -. 내가이 픽셀입니다 생각했기 때문에 그것도 같이 아니다 = 800 어쨌든, 난 ... 100 %가 아닌 정확한 픽셀 필요)

html로 간단합니다 :

<body> 
    <div class="section"></div> 
    <div class="section"></div> 
    <div class="section"></div> 
</body>

여기 내 테스트 페이지는 다음과 같습니다. http://photography.igorlaszlo.com/test.html - 메뉴는 이미 내가 원하는 것을 수행합니다 (아직 완벽하지 않은 끈적 끈적한 효과는 중요하지 않습니다). 사전에 http://www.atelier-serge-thoraval.com

감사 :

여기에 내가하고 싶은 것이 좋은 예입니다!

출처

2014-06-13 Igor Laszlo