안녕하세요 :)
오늘은 포트폴리오에서 많이 사용하는 스크롤 시 영역이 이동되는 쿼리를 해볼까 합니다
이전 포스팅에서 JS플러그인을 소개하는 글에서 처음으로 소개했던 플러그인을 사용해도 무방하지만
코드로 작성할 수 있으면 더 좋지 않을까 해서 제가 학원에서 배운 것을 공유를 해드릴게요^^
포트폴리오에 사용된 JS
포트폴리오를 준비하면서 벤치마킹을 열심히 하면서 괜찮은 JS 플러그인들이 많아서 소개하려합니다. 1. fullPage.js 첫번째로 소개해줄 플러그인은 첫번째 포트폴리오 기획했던 내용중 https://chpofo
chpofo.tistory.com
먼저 완성작을 먼저 보고 코딩을 시작해 봅시다:)
영상에서와 같이 스크롤을 하면 한 영역씩 이동이 되는 그런 코드를 작성해봅시다
생각보다 어렵지 않으니까 천천히 따라 해 보아요
우선 HTML부터 작성을 해야겠지오?
<body>
<div class="content"><h1>1</h1></div>
<div class="content"><h1>2</h1></div>
<div class="content"><h1>3</h1></div>
<div class="content"><h1>4</h1></div>
<div class="content"><h1>5</h1></div>
<div class="content"><h1>6</h1></div>
<div class="content"><h1>7</h1></div>
</body>간단하죠??
지금은 그냥 영역을 나누기만 해서 간단하지만 나중에 포트폴리오를 작성할 때는
<div> 태그 안에다가 원하는 내용을 작성하시기만 하면 됩니다 :)
CSS로 영역을 확실하게 나누어봅시다
html{overflow: hidden;}
html, body{width: 100%; height: 100%;}
.content{
width: 100%; height: 100%;
background-color: blueviolet;
position: relative;
}
.content > h1{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
font-size: 20em;
font-weight: bold;
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
}
.content:nth-child(even){background-color: #333;}
▼ 소스코드 살펴보기
1 : 스크롤바를 없애기 위한 소스
3 :. content 요소의 높이를 전체 화면으로(뷰포트) 설정하기 위해 먼저 html 요소와 body 요소의 높이를 설정
6 : 단위의 기준은 부모인 html, body의 크기가 되므로 영역하나 가 전체 화면을 차지할 수 있다
9 : <h1> 요소가 .content 요소의 영역을 기준으로 배치가 되도록 포지션 값을 준다
12~14 : .content 요소의 영역을 기준으로 가운데 배치
21 : .content요소의 짝수의 배경을 바꿔서 영역을 보기 좋게 색상을 변경
여기까지도 충분히 이해할 수 있는 부분이라고 생각합니다
CSS에서 처음 듣는 단어나 이해를 못하겠다면 댓글로 달아주시면 제가 다시 한번 더 설명을 해드릴게요
이것을 구현하기 위한 마지막! 중요한 단계 JS를 작성을 해야겠지요??
jQuery는 소스를 나누어서 설명하고 마지막에 한 번에 다시 적어드릴게요
1. 기본 이벤트 제거
window.addEventListener("wheel", function(e){
e.preventDefault();
},{passive : false});
▼ 소스코드 살펴보기
우리가 사용할 이벤트는 wheel이벤트인데, 휠을 굴렸을 때 스크롤이 되지 않도록 하려면 wheel의 기본 이벤트인 scroll를 제거를 해줘야 한다.
근데 여기서 패시브모드를 해제를 해야 한다고 한다.
저도 이게 기억이 안 나서 다시 찾아보고 공부를 해봤는데 제가 이해한 선에서 설명을 해드릴게요 :)
📢 패시브 모드?해제?false??
passive는 addeventListener() 옵션중에 1개이다
passive옵션은 true와 flase 값을 가지게 된다
flase인 경우 : preventDefault()를 이용해서 이벤트 자체를 막을 수 있기 때문에, 브라우저는 scroll를 계속할지 안할지를 매번 검사하게 된다. passive옵션의 기본값이다.
true인 경우 : 스크롤이벤트를 막지 않겠다! preventDefalt()를 사용할 수 없다.
처음에는 passive모드의 기본값이 flase이니까 따로 써줄 필요가 없지 않나 생각을 했었는데 아닌가봐요ㅜㅜ
그래서 더 검색해보고 찾아본 결과
기본이벤트를 제거를 해도 여전히 스크롤이 여전히 되고 오류가 발생이된다고 한다.
→ 이유는 패시브모드에서 동작하는 이벤트 이기 때문에
→ 그래서 패시브 모드를 끈 상태에서 기본이벤트를 제거를해야되는거다
아니 근데 passive모드의 기본값이 flase라며... 내가 잘못 본건가.. 저좀 이거 이해좀 시켜주세요..ㅠㅠ
2. 참조하는 요소 미리 탐색 및 선언
var $html = $("html");
var page = 1;
var lastPage = $(".content").length;
$html.animate({scrollTop:0},10);▼ 소스코드 살펴보기
3 : 뷰포트에 표시되는 페이지의 번호
5 : 마지막 페이지의 번호
7 : 문서(페이지)가 로드되면 첫 페이지 시작
3. 휠을 굴리면 다음 페이지, 이전 페이지
$(window).on("wheel", function(e){
if($html.is(":animated")) return;
if(e.originalEvent.deltaY > 0){
if(page== lastPage) return;
page++;
}else if(e.originalEvent.deltaY < 0){
if(page == 1) return;
page--;
}
var posTop = (page-1) * $(window).height();
$html.animate({scrollTop : posTop});
});▼ 소스코드 살펴보기
1 : 이벤트 핸들러로 마우스 휠을 굴리면 발생하는 이벤트
3 : 아래에서 호출된 .animate 메서드로 생성된 스크롤 효과가 쌓이지 않도록 스크롤이 진행되는 동안 발생하는 wheel이벤트는 무시한다.
5, 9 : e(jQuery가 반환) .originalEvent(자바스크립트에서의 원래 이벤트) .deltaY(마우스 휠을 어느 방향으로 얼만큼을 굴렸는지 → 양수이면 아래쪽으로 굴린 거, 음수이면 위쪽으로 굴린 거다)
6 : 마지막 페이지인 경우에는 이벤트 핸들러 종료(스크롤될 것이 없으니 마지막에서 멈춰!!)
8, 12 : 스크롤을 아래로 했으면 페이지 +1, 위로 올렸으면 -1씩 시키기
10 : 첫 번째 페이지인 경우에도 이벤트 핸들러 종료(올라갈 곳이 없으니 첫 번째에서 멈춰!!)
14 : 이동할 페이지의 번호에 스크롤할 위치 계산
16 : 계산한 위치로 이동
처음 보신 분들은 복잡할 수도 있지만 한줄한줄 천천히 읽고 이해를 하면 쉽게 다들 구현할 수 있을 거예요~
잘되는지 실행도 해보고 console.log 찍어서 확인도 해보세요!!
오늘 작성한 글이 도움이 되는 분들이 많았으면 좋겠네요ㅎㅎ
많이 어려우시면 지난번에 소개해드린 플러그인을 사용해서 구현하면 되는 거고
방법은 여러 가지가 있으니까 저의 소스뿐만 아니라 다른 사람들의 소스로도 구현해보세요
본인한테 맞고 이해하기 쉬운 코드로 구현하는 게 좋은 코드이니까요 :)
궁금하신 점이나 이해하기 어려운 부분은
댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요^^
댓글과 하트는 저에게 많은 힘이 됩니다 :)
'Portfolio > Publishing' 카테고리의 다른 글
| 애니메이션을 이용한 가로 막대그래프(스킬바) (2) | 2021.06.08 |
|---|---|
| HTML에 SVG 파일 추가하여 움직이는 애니메이션 구현 (0) | 2021.04.28 |
| 포트폴리오에 사용된 JS (2) | 2021.03.31 |
댓글