pagePiling.js

ui-component animation layout

pagePiling.js는 웹 페이지에서 섹션을 스크롤링하여 쌓을 수 있게 해주는 JavaScript 라이브러리입니다. 사용자는 마우스 스크롤 또는 키보드를 통해 각 섹션을 순차적으로 넘길 수 있으며, 이는 전체 페이지를 통한 매끄러운 전환 효과를 제공합니다.

Latest Ver 1.5.6

Homepage

Github

📢 pagePiling.js는 웹 페이지의 섹션들을 스크롤로 쉽게 탐색할 수 있게 해주는 라이브러리입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.js

https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.min.js

https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.css

https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.min.css

https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.min.css.map

https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.min.js.map

Sample Code

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

📄 HTML
<div id="pagepiling"><div class="section" style="background-color: #ff5f45;"><h1>Section 1</h1></div><div class="section" style="background-color: #0798ec;"><h1>Section 2</h1></div><div class="section" style="background-color: #fc6c7c;"><h1>Section 3</h1></div></div><script>$(document).ready(function() {$('#pagepiling').pagepiling();});</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.9/jquery.pagepiling.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.9/jquery.pagepiling.min.js"></script>

⚙️ JavaScript
$(document).ready(function() {$('#pagepiling').pagepiling();});