fullPage.js

fullPage.js는 사용자가 풀스크린 스냅 스크롤링 웹사이트를 쉽게 만들 수 있게 도와주는 자바스크립트 라이브러리입니다. 각 섹션을 화면 크기에 맞추어 전체 화면으로 스크롤링하는 기능을 제공합니다.

Latest Ver 4.0.35

Homepage

Github

35,414

페이지가 넘어갈 때마다, 새로운 경험이 펼쳐집니다.

fullPage.js로 웹사이트에 감각적인 전환 효과를 추가하세요.

fullPage.js는 풀스크린으로 웹 페이지의 각 섹션을 스냅 스크롤할 수 있게 해주는 라이브러리입니다.

CDN 다운로드

License: GPL-3.0

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.extensions.min.js

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.js

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.min.js

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/vendors/easings.js

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/vendors/easings.min.js

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.css

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.min.css

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.min.css.map

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/vendors/easings.min.js.map

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div id='fullpage'>
  <div class='section'>Section 1</div>
  <div class='section'>Section 2</div>
  <div class='section'>Section 3</div>
</div>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

⚙️ JavaScript
new fullpage('#fullpage', {
  autoScrolling: true,
  navigation: true
});