Repolode
제출하기
alvarotrigo

alvarotrigo/fullPage.js

섹션과 가로 슬라이드를 사용하는 풀스크린 스크롤 웹사이트를 만들기 위한 JavaScript 라이브러리입니다.

GitHub에서 보기웹사이트
스타
35,360
포크
7,061
열린 이슈
137
마지막 커밋
2개월 전

어떤 프로젝트인가요?

fullPage.js를 사용하면 한 페이지로 구성된 풀스크린 스크롤 웹사이트를 만들 수 있습니다. 각 섹션은 뷰포트 전체를 채우며, 마우스 휠, 터치 스와이프, 키보드 또는 내비게이션 도트로 이동할 수 있습니다. 섹션 안에 가로 슬라이더를 배치할 수 있고, 특정 섹션과 슬라이드로 연결되는 앵커 링크와 현재 활성 섹션에 연결되는 메뉴도 지원합니다.

래퍼 요소에 한 번 호출해 초기화하며, 스크롤 속도, 이징, 반복, 미디어 지연 로딩, 지정한 너비나 높이 아래에서 일반 스크롤로 전환하는 반응형 대체 동작 등을 옵션으로 설정할 수 있습니다. onLeave와 afterLoad 같은 메서드와 콜백을 사용하면 전환 시점에 코드를 연결할 수 있습니다. 순수 JavaScript로 사용할 수 있으며, jQuery 플러그인과 Vue, React, Angular용 래퍼도 제공합니다.

시네마틱 효과, 패럴랙스, 슬라이드 효과, 드래그 앤 무브 같은 일부 고급 기능은 라이선스 키가 필요한 확장 기능으로 배포됩니다. 핵심 라이브러리는 GPL-3.0으로 제공되며 상용 라이선스도 선택할 수 있습니다.

핵심 기능

  • 01스크롤, 스와이프 또는 키보드 입력에 맞춰 뷰포트에 스냅되는 풀스크린 섹션.
  • 02섹션 안에 배치할 수 있는 가로 슬라이더.
  • 03섹션과 개별 슬라이드로 연결되는 앵커 링크 및 브라우저 방문 기록 지원.
  • 04현재 활성 섹션을 반영하는 메뉴와 내비게이션 도트.
  • 05이미지, 동영상, 오디오 지연 로딩과 임베드 미디어의 자동 재생 및 섹션을 벗어날 때 일시 정지.
  • 06지정한 너비나 높이 아래에서 일반 스크롤로 전환하는 반응형 대체 동작.

활용 사례

  • 풀스크린 섹션으로 구성된 한 페이지 마케팅 또는 제품 랜딩 사이트 제작.
  • 섹션 단위로 콘텐츠가 진행되는 스토리텔링 페이지 제작.
  • 스크롤 페이지 안에 슬라이드쇼 스타일의 패널 추가.
  • Vue, React 또는 Angular 래퍼를 사용해 WordPress나 프레임워크 프로젝트에 적용.

빠른 시작

  1. 1

    npm으로 fullPage.js를 설치합니다

    npm install fullpage.js
  2. 2

    HTML 페이지에 CSS 및 JavaScript 파일을 포함합니다

  3. 3

    래퍼 요소에서 fullPage.js를 초기화합니다

사용 전 알아둘 점

  • GPL-3.0 라이선스가 적용되므로, 독점적인 용도로 사용하려면 별도의 상용 라이선스가 필요합니다.
  • 비공개 소스 프로젝트에서 상업적으로 사용하려면 공급업체로부터 라이선스를 구매해야 합니다.

토픽

#javascript#fullscreen#scrolling#slider#single-page#animation#frontend-library#fullpage#jquery#mousewheel

자주 묻는 질문

fullPage.js은(는) 무엇인가요?
섹션과 가로 슬라이드를 사용하는 풀스크린 스크롤 웹사이트를 만들기 위한 JavaScript 라이브러리입니다. fullPage.js를 사용하면 한 페이지로 구성된 풀스크린 스크롤 웹사이트를 만들 수 있습니다. 각 섹션은 뷰포트 전체를 채우며, 마우스 휠, 터치 스와이프, 키보드 또는 내비게이션 도트로 이동할 수 있습니다. 섹션 안에 가로 슬라이더를 배치할 수 있고, 특정 섹션과 슬라이드로 연결되는 앵커 링크와 현재 활성 섹션에 연결되는 메뉴도 지원합니다.
fullPage.js은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
fullPage.js은(는) GPL-3.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
fullPage.js은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. fullPage.js의 마지막 커밋은 2026년 9월 20일입니다.
fullPage.js은(는) 어디에 사용할 수 있나요?
풀스크린 섹션으로 구성된 한 페이지 마케팅 또는 제품 랜딩 사이트 제작. 섹션 단위로 콘텐츠가 진행되는 스토리텔링 페이지 제작. 스크롤 페이지 안에 슬라이드쇼 스타일의 패널 추가. Vue, React 또는 Angular 래퍼를 사용해 WordPress나 프레임워크 프로젝트에 적용.
fullPage.js는 어떻게 설치하나요?
npm으로 fullPage.js를 설치합니다: npm install fullpage.js HTML 페이지에 CSS 및 JavaScript 파일을 포함합니다 래퍼 요소에서 fullPage.js를 초기화합니다
fullPage.js은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/alvarotrigo/fullPage.js

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트