[JS 라이브러리] Fullpage.js의 모든 것

JINJIN·2023년 2월 22일

JavaScript 라이브러리

JS 라이브러리

목록 보기

1/4

수 많은 JS 라이브러리들을 하나씩 정복하기 위해서 작성하는 글입니다.

📌 Fullpage.js란?

Fullpage.js란 무엇인가?

Fullpage.js는 웹 페이지에서 전체 화면 스크롤링 효과를 구현할 수 있는 JavaScript 라이브러리입니다.

Fullpage.js를 사용하면, 웹 페이지를 여러 섹션으로 나누어 각 섹션을 스크롤링으로 전환할 수 있습니다. 이를 통해 사용자는 웹 페이지를 일반적인 방법보다 더 직관적으로 탐색할 수 있으며, 웹 페이지의 시각적 효과를 높일 수 있습니다.

Fullpage.js의 특징

Fullpage.js의 주요 특징은 다음과 같습니다.

모바일 및 데스크탑 모두 지원
다양한 설정 옵션을 제공하여 사용자 정의 가능
마우스 휠, 키보드, 터치 이벤트 모두 지원
브라우저 호환성이 높음
간단한 설치 및 사용 방법

📌 Fullpage.js 사용방법

Fullpage.js 설치 방법

Fullpage.js를 사용하기 위해서는 먼저 Fullpage.js 파일을 다운로드하여 웹 페이지에 추가해야 합니다. Fullpage.js 파일은 다음 링크에서 다운로드할 수 있습니다.

https://alvarotrigo.com/fullPage/#download

Fullpage.js 파일을 다운로드한 후에는, HTML 파일에서 다음과 같이 Fullpage.js 파일을 추가할 수 있습니다.

<head>
  <link rel="stylesheet" href="fullpage.min.css" />
</head>
<body>
  <div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
  </div>
  <script src="fullpage.min.js"></script>
  <script>
    new fullpage('#fullpage', {
      // options here
    });
  </script>
</body

또 다른 방법으로는 CDN을 이용하여 설치하는 방법도 있습니다.
Fullpage.js 파일을 다운로드하여 로컬에 저장하지 않아도 되기 때문에 간편하게 사용할 수 있습니다.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.17/fullpage.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.17/fullpage.js"></script>
</head>

이후에 Fullpage.js를 사용하는 방법은 로컬 설치와 동일합니다.

new fullpage('#fullpage', {
  // options here
});

단, Fullpage.js의 버전이 업데이트 되거나 CDN 서버에 문제가 생길 수 있으므로, 안정성과 보안을 고려하여 로컬 설치를 권장합니다.

Fullpage.js 기본 설정

Fullpage.js를 사용하기 위해, HTML 파일에는 다음과 같이 fullpage 클래스가 지정된 하나의 div 요소가 있어야 합니다.
이 div 요소는 전체 페이지를 감싸는 컨테이너 역할을 하며, 각 섹션을 하위 요소로 가집니다.

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

그리고, JavaScript 파일에서는 다음과 같이 fullpage 클래스를 사용하여 Fullpage.js를 초기화합니다.

new fullpage('#fullpage', {
  // options here
});

Fullpage.js 옵션 설정

Fullpage.js를 사용할 때, 다양한 설정 옵션을 지정할 수 있습니다. Fullpage.js에서 지원하는 대표적인 옵션들은 다음과 같습니다.

sectionSelector : 섹션의 선택자를 지정합니다.
scrollOverflow : 콘텐츠가 섹션 크기보다 큰 경우, 스크롤링을 허용할지 여부를 지정합니다.
navigation : 페이지 내비게이션을 사용할지 여부를 지정합니다.
scrollingSpeed : 스크롤링 속도를 지정합니다.

옵션을 설정하려면, 다음과 같이 객체를 생성하여 Fullpage.js에 전달합니다.

new fullpage('#fullpage', {
  sectionSelector: '.section',
  scrollOverflow: true,
  navigation: true,
  scrollingSpeed: 1000,
  // ...
});

📌 Fullpage.js 장단점

Fullpage.js의 장점

다양한 설정 옵션을 제공하여 사용자 정의가 용이
모바일 및 데스크탑 모두 지원
브라우저 호환성이 높음
페이지 전환 효과가 매우 부드러움

Fullpage.js의 단점

Fullpage.js의 기능이 간단. 따라서 복잡한 웹 사이트를 구현할 때는 다른 JavaScript 라이브러리와 함께 사용해야 할 수도 있음
Fullpage.js를 사용하면, 웹 페이지의 섹션을 미리 정해놓아야 하므로, 동적인 섹션 생성이 어렵다는 점이 있음
Fullpage.js를 사용하면, 웹 페이지의 SEO(Search Engine Optimization)가 저하될 수 있음 검색 엔진 크롤러는 Fullpage.js의 기능을 인식하지 못하고, 단순히 전체 페이지를 하나의 섹션으로 간주할 가능성이 높기 때문

이상으로 Fullpage.js에 대한 정보, 사용방법, 예시코드, 장단점에 대해 알아보았습니다. Fullpage.js는 사용이 간단하면서도 다양한 설정 옵션을 제공하는 JavaScript 라이브러리로, 웹 페이지의 시각적인 효과를 높이는 데 유용합니다.

JINJIN

안녕하세요! 배우는 것을 좋아하는 개발자 JINJIN입니다.

다음 포스트

[JS 라이브러리] Fullpage.js의 모든 것