jQuery 마우스 휠을 사용하여 특정 섹션 스크롤

Question

이 스크롤 효과 (링크 : http://nicolas-bussiere.com/)를 만들고 싶지만 그 방법을 모릅니다.

jQuery를 처음 사용하기 때문에 웹 사이트에서 사용하는 복잡한 코드를 이해하기가 어렵습니다. 나는 Mousewheel 플러그인으로 스크롤을 시도했지만 이해할 수는 없다.

여기 내 웹 사이트입니다 ->http://heeyounhong.com/

나는 세 가지 "에 대한" "소개"입니다 섹션과 "작품"을 가지고있다. "작품"섹션에는 8 가지 프로젝트가 있습니다.

---

오른쪽에는 아래 그림과 같은 그림이 있습니다.

1. <!-- ** PROJECTS : RIGHT ** --> 
    
   <div class="content illustrations-container"> 
    
       <ul class="illustrations"> 
    
        <li class="illustration"></li> 
    
        <li class="illustration"></li> 
    
        <li class="illustration"></li> 
    
        <li class="illustration"></li> 
    
        <li class="illustration"></li> 
    
        <li class="illustration"></li> 
    
        <li class="illustration"></li> 
    
        <li class="illustration"></li> 
    
       </ul> 
    
   </div>

   가 나는 부분을 스크롤 할 때 "UL"의 "애니메이션"클래스를 추가하고 아래와 같이 스타일을 추가 할. 왼쪽에서

   ---

   first scrolling > "transform: translateY(-100%) translateZ(0px);" 
    
   second scrolling > "transform: translateY(-200%) translateZ(0px);" 
    
   third scrolling > "transform: translateY(-300%) translateZ(0px);"

는, I는 다음과 같은 8 "라인"div가있다.

<!-- ** PROJECTS : LEFT ** --> 
 
<div class="lines title"> 
 
    <div class="line proj line-proj1"></div> 
 
    <div class="line proj line-proj2"></div> 
 
    <div class="line proj line-proj3"></div> 
 
    <div class="line proj line-proj4"></div> 
 
    <div class="line proj line-proj5"></div> 
 
    <div class="line proj line-proj6"></div> 
 
    <div class="line proj line-proj7"></div> 
 
    <div class="line proj line-proj8"></div> 
 
</div>

I 클래스 ".before" "후론" ".going 업" ".going 다운"을 추가 할

".current

"각 div에"div ".

내 설명이 거칠지 만, 필자가 작성한 모든 코드를 작성할 수는 없다.

벤치마킹 한 웹 사이트 코드를 참조하고 스타일 시트 (style.css)의 스크롤 효과에 필요한 대부분의 클래스를 넣습니다.

Answer 1

당신은 먼저 마우스 휠 이벤트를 2 일을해야합니다

$('#foo').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta /120 > 0) { 
      console.log('scrolling up !'); 
     } 
     else{ 
      console.log('scrolling down !'); 
     } 
    }); 

다음 당신은 당신이 요소를 일단

function inViewport (el) { 

    var r, html; 
    if (!el || 1 !== el.nodeType) { return false; } 
    html = document.documentElement; 
    r = el.getBoundingClientRect(); 

    return (!!r 
     && r.bottom >= 0 
     && r.right >= 0 
     && r.top <= html.clientHeight 
     && r.left <= html.clientWidth 
    ); 
} 

다음 뷰포트에 표시되는 DIV 추적해야합니다 뷰포트에 요소를 위 또는 아래로 선택하고 스크롤 할 수 있습니다.