한 페이지씩 올라가는 스크롤

한 페이지씩 올라가는 스크롤 구현하기

스크롤을 할 때마다 한 페이지씩 넘어가는 사이트를 구현하고 싶어서 찾아보았는데 방법이 다양하게 있었다. 그중에서 몇 가지 방법을 소개해보겠다.

📌 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를 호출해주면 된다. 여기엔 다양한 옵션들이 있는데 위에 데모 사이트에서 찾아보면 된다. 자주 쓰는 옵션만 간단하게 설명해보겠다.

📌 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를 작성하면 반응형일 때 유연하게 수정할 수 있는 장점 또한 있으니 두 번째 방법을 추천한다..!