[jQuery] Scroll event 적용하기

스크롤할 때 영역 밖에 가려지는 컨텐츠 반투명하게 설정했다가

스크롤로 영역 안으로 들어왔을 때 다시 투명하지 않게 바꾸는 애니메이션 

 

 

   if(wheel>0){ 
      //스크롤 올림(영역이 아래로 내려감)
      var max= $(".open").length;
      //현재 opacity:1 인 box 의 갯수를 가져온다 
          for(var i=0; i<max; i++){
            var BoxTop = $(".open").eq(i).offset().top;
            //현재 opacity:1 인 box 의  윗부분의 위치를 구한다. 
                 if(BoxTop > check+350 ){              
                 // 윗부분이 영역 밖으로 넘어갔을때 다시 투명하게 설정 
                    $(".open").eq(i).removeClass("open");
                 }
            }
      }else { 
       //스크롤 내림(영역이 위로 올라옴)
          var max = $(".box").length;
          //전체 box 갯수를함 
           for(var i=0; i<max; i++){
                 if($(".box").eq(i).offset().top < check+450){ 
                 //box 영역의 맨 윗부분이 전체 박스 500px에서 450px 위로 올라왔을때 
                 //즉 box의 윗부분이 50px 이상 드러나면 ..
                       $(".box").eq(i).addClass("open");
                       //.open { opacity:1 }
                 }
           }
      } 

 

 

 

 

플러그인 

[javascript/javascript] - [자바스크립트 플러그인]쉽고 간단하게 스크롤 애니메이션 등록하기 WOW.js