전체페이지 스크롤 fullpage.js 사용법 알아보기

홈페이지를 제작할 때 전체 페이지를 한번에 스크롤할 수 있는 라이브러리를 찾고 있다면 fullpage.js 를 사용해보세요.

해당 라이브러리를 이용하면 간편하게 스크롤 한번에 위아래로 이동이 가능합니다.

 

해당 라이브러리는 3 버전 이후 부터는 유료이며 무단으로 사용시 개발자 도구에서 라이센스를 등록하라는 경고문이 뜨기 때문에 이 점 유의해주시구요.

 

3 버전 이전 2.9.7 버전은 무료로 사용할 수 있기 때문에 상황에 맞게 사용해보시길 바랍니다.

 

fullpage.js 다운로드

fullPage.js-2.9.7.zip

8.36MB

 

 

우선 유료 버전이나 무료 버전을 다운로드 받으신 다음에

해당 폴더에 들어가 dist 폴더에 접속합니다.

 

여기서 이제 필요한 파일은 크게 두가지 입니다.

 

fullpage.css

fullpage.js

 

(2.9.7버전은 jquery.fullpage.css / jquery.fullpage.js)

 

해당 파일을 원하는 경로에 맞게 넣어주면 됩니다.

 

또한 직접 경로가 아닌 방법도 존재합니다.

예를 들어 아래는 CDN을 통해 FullPage.js를 포함하는 방법입니다.

 

<script src="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css">

 

직접 경로를 통해 파일을 넣어주었거나 CDN을 이용해 연결이 완성되었다면 아래 작업을 진행하시면 됩니다.

 

HTML 구조 설정

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
</div>

 

스크립트 초기화

new fullpage('#fullpage', {
    // 옵션 설정
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
    menu: '#menu',
    scrollingSpeed: 1000
});

 

위 코드에서

#fullpage :  FullPage.js를 적용할 요소의 ID
sectionsColor :  각 섹션의 배경색 지정
anchors :  각 섹션에 대한 앵커 설정
menu : 네비게이션 메뉴를 나타내는 요소의 ID 지정
scrollingSpeed : 스크롤 속도 설정

 

 

 

풀페이지 데모사이트 바로가기

 

fullPage scroll snapping. Create full screen pages fast and simple