한 페이지씩 올라가는 스크롤 구현하기
스크롤을 할 때마다 한 페이지씩 넘어가는 사이트를 구현하고 싶어서 찾아보았는데 방법이 다양하게 있었다. 그중에서 몇 가지 방법을 소개해보겠다.
📌 fullPage.js 이용
가장 간단한 플러그인을 활용하는 방법이다. 아래는 데모사이트이다. 아래 사이트에 접속하면 fullPage가 어떻게 동작하는지 볼 수 있다.
https://alvarotrigo.com/fullPage/ko/#page1
1) 위의 데모 사이트에 접속하여 js와 css 파일을 받는다.
fullpage 플러그인은 원래 무료였지만 유료화되어 버전3을 사용하려면 라이선스 키가 필요하다고 한다. 위의 사이트에서 버전2로 다운로드 받으면된다.
2) html 작성
<div id="fullpage">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
</div>이렇게 class명을 section으로 해주어야한다.
3) 플러그인 적용
<link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css">
<script type="text/javascript" src="../js/jquery.fullPage.js"></script>head 안에 다음과 같이 자신이 다운로드 받은 경로에 맞게 코드를 추가해준다. 내가 추가해준 것은 버전 2를 기준으로 작성하였다.
4) 스크립트 작성
$('#fullpage').fullpage({
slidesNavigation: true,
responsiveWidth: 1024,
autoScrolling: true
});다음과 같이 스크립트로 fullPage를 호출해주면 된다. 여기엔 다양한 옵션들이 있는데 위에 데모 사이트에서 찾아보면 된다. 자주 쓰는 옵션만 간단하게 설명해보겠다.
| 옵션 | 설명 |
|---|---|
| slidesNavigation | true로 설정되면 웹사이트에서 각 수평방향 슬라이더마다 작은 원으로 이루어진 이동 막대기를 보여줌 |
| responsiveWidth | 픽셀로 정의된 폭 아래에 정상 스크롤(autoScrolling:false) 사용 |
| autoScrolling | "automatic" 스크롤을 쓸지 "normal" 스크롤을 쓸지를 정의 |
| scrollBar | 웹사이트에 스크롤 막대기를 쓸지 말지를 결정 |
| anchors | 각 구역별 URL에 보여질 앵커 링크(#예시)를 정의. 앵커값은 고유해야한다. |
📌 js 직접 작성하기
1) html 작성
<div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
</div>위의 예제와 같이 작성해준다.
2) css 작성
html, body {width: 100%; height: 100%;}
.content{
height: 100vh;
}3) js 작성
👉 기본이벤트 제거하기
window.addEventListener("wheel", function(e){
e.preventDefault();
},{passive : false});👉 페이지 선언
var $html = $("html");
var page = 1;
var lastPage = $(".content").length;
$html.animate({scrollTop:0},10);👉 마우스 휠 굴렸을 때 이벤트 넣기
$(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});
});"wheel" 이벤트를 추가해주는데, 일단 animate 메서드로 생성된 스크롤 효과가 생기지 않도록 막아준다. 그리고 deltaY로 마우스 휠을 어느 방향으로 얼만큼 굴렸는지 알 수 있기때문에 이를 이용하여 deltaY가 양수면 아래쪽으로 굴린 것이고, 음수면 위쪽으로 굴린 것을 각각 구분하여 페이지를 이동시켜준다.
📌 마치며..
이렇게 두 가지 방법을 간단히 소개해보았는데 첫 번째 방법인 fullPage.js 플러그인을 사용하면 다른 js와 충돌하는 이슈가 존재하는 것 같다. 때문에 두 번째 방법으로 직접 js를 작성하면 반응형일 때 유연하게 수정할 수 있는 장점 또한 있으니 두 번째 방법을 추천한다..!
