pagePiling.js

ui-component animation layout

pagePiling.js is a JavaScript library that allows for the creation of a scrolling pile of sections within a web page. Users can navigate through the sections sequentially via mouse scroll or keyboard, providing a smooth transition effect across the whole page.

Latest Ver 1.5.6

Homepage

Github

📢 pagePiling.js is a library that facilitates easy navigation through sections of a webpage by scrolling.

CDN Download

License: MIT

Asset Type :

View All Versions

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

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 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();});