In this tutorial I will show you how to create a full screen scrolling website with piling effect on page transition. In this article I will be using a jQuery library called as pagePiling.js. With just few lines of code you can get a full screen scrolling with page piling effect.
Demo
Including pagePiling.js and jQuery in Webpage
You can directly include pagePiling.js and jQuery from CDN.
<!doctype html>
<html>
<head>
<title>Full Screen Scrolling with Page Piling Effect Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
</body>
</html>
<html>
<head>
<title>Full Screen Scrolling with Page Piling Effect Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
</body>
</html>
Full Screen Scrolling with Page Piling Effect
Here are some points you need to remember while using the library.
- Each section will be defined with a div containing the section class.
- The active section by default will be the first section, which is taken as the home page.
- Initiate pagePiling.js after webpage has loaded.
Here is the complete code. We created such kind of effect with just few lines of code
<!doctype html>
<html>
<head>
<title>Full Screen Scrolling with Page Piling Effect Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
</head>
<body>
<div id="pagepiling">
<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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pagepiling').pagepiling();
});
</script>
</body>
</html>
<html>
<head>
<title>Full Screen Scrolling with Page Piling Effect Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
</head>
<body>
<div id="pagepiling">
<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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pagepiling').pagepiling();
});
</script>
</body>
</html>
