JQuery Page Pilling

In this article, we will understand how to create a jQuery page pilling with the help of various examples.

What is JQuery Page Pilling?

It is a jQuery plug-in for 'piling' your layout sections over one another and accessing them by scrolling or side bullets navigation. It provides features like smooth vertical, horizontal, and side navigations to the destination anchor links. For this, we can use the PagePiling.js file.

Following are the various examples of jQuery page pilling.

Example 1:

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> How to Create PagePilling using JQuery </title>
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.css">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.js"> </script>
<style>
*,
*:before {
  transition: 0.35s ease;
}
*:after {
  transition: 0.35s ease;
}
.navbar-fixed {
  position: fixed;
}
nav a {
  text-decoration: none !important;
  color: #aaa;
}
nav ul li a {
  color: #777;
  transition: 0.3s ease;
}
nav ul li a:hover {
  color: #444;
}
.left li.active {
  background: none;
  box-shadow: inset 0 -2px 0 #39cb58;
}
nav ul a:hover {
  background: none;
}
.side-nav li {
  padding: 0;
}
a.brand-logo {
  background-image: url("logo.png");
  height: 100%;
  width: 150px;
  background-size: 100% 100%;
}
.navbar-fixed nav {
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
  border-bottom: 1px solid #ccc;
}
.navbar-nav li a {
  font-family: Lato;
  font-size: 14px;
  padding: 20px;
padding: 25px !important; 
}
ul.left.hide-on-med-and-down {
  margin-left: 160px;
}
.mainLinks:first-child {
  padding-right: 0;
}
.side-nav a.mainLinks {
  padding: 5px;
  height: auto;
}
button.center-block {
  display: block;
  width: 90%;
  margin: 0 auto;
}
body {
  background-color: #555;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
 color: black;
  margin: 20px;
   text-align: center; 
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
button.center-block {
  margin-top: 20px;
  display: block;
  width: 60%;
  line-height: 2em;
  background: rgba(114,212,202,1);
  border-radius: 5px;
  border: 0;
  border-top: 1px solid #B2ECE6;
  box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389;
  color: #FFFFFF;
  font-size: 1.5em;
  text-align: center;
  text-shadow: 0 1px 2px #21756A;
}
button.center-block:hover {
 background: linear-gradient(to bottom, rgba(107,198,186,1) 0%,rgba(57,175,154,1) 100%);  
}
button.center-block:active {
  box-shadow: inset 0 0 5px #000;
  background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%); 
}
button.center-block:focus {
    outline: none;
    border-color: green;
}
</style>
<body>
<h1> Example </h1>
		<h2> How to Create PagePilling using Jquery </h2>
		<center>
	<div id = "pagepiling">
  <div class = "section" id = "section1">
    <h1 class = "h2"> Page Pile 1 </h1>
	<button class = "center-block"> Pile 1 </button>
  </div>
  <div class = "section" id = "section2">
    <h1 class = "h2"> Page Pile 2 </h1>
	<button class = "center-block"> Pile 2 </button>
  </div>
  <div class = "section" id = "section3">
    <h1 class = "h2"> Page Pile 3 </h1>
	<button class = "center-block"> Pile 3 </button>
  </div>
  <div class = "section" id = "section4">
    <h1 class = "h2"> Page Pile 4 </h1>
	<button class = "center-block"> Pile 4 </button>
  </div>
  <div class = "section" id = "section5">
    <h1 class = "h2"> Page Pile 5 </h1>
	<button class = "center-block"> Pile 5 </button>
  </div>
</div>
<script>
$(document).ready(function() {
  $('#pagepiling').pagepiling({
    menu: '#menu',
    anchors: ['page1', 'page2', 'page3', 'page4'],
    sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
    navigation: {
      'position': 'right',
      'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
    },
    afterRender: function() {
      $('#pp-nav').addClass('custom');
    },
    afterLoad: function(anchorLink, index) {
      if (index > 1) {
        $('#pp-nav').removeClass('custom');
      } else {
        $('#pp-nav').addClass('custom');
      }
    }
  });	
});
</script>
</body>
</html>

Explanation:

In the above example, we have created the basic working of the pagePiling. It supports interactive scrolling of different web layout pages.

Output:

Following is the output of the example.

Example 2:

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> How to Create PagePilling using JQuery </title>
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.css">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.js"> </script>
<style>
body {
    font-family: sans-serif, arial, helvetica;
}
 #pp-nav li .active span {
    background: #bbb;
}
.pp-slidesNav .active span {
    background: #bbb;
}
#pp-nav span {
    border-color: #bbb !important;
}
.pp-slidesNav span {
    border-color: #bbb !important;
}
 .section {
    background-attachment: fixed;
    background-size: auto 80%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}
#section1 {
    background-image: url(https://dgt5r4zz5sach.cloudfront.net/~/media/images/modules/large/hbr_h_gif_final.gif?as=1&t=635549701220714646);
}
#section2 {
    background-image: url(https://dgt5r4zz5sach.cloudfront.net/~/media/images/modules/large/nike%20making%20large.jpg?as=1&t=635616687017735022);
}
#section3 {
    background-image: url(https://dgt5r4zz5sach.cloudfront.net/~/media/images/modules/large/homepage_h_05-notext.jpg?as=1&t=635588424878366703);
}
#section4 .content {
    top: 100%;
    position: absolute;
    left: 0;
}
#pp-nav li .active span {
    background: #200c32;
}
body {
  color: #fff;
  font-family: 'Raleway';
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  height: 100vh;
  margin: 0;
  text-transform: uppercase;
}
body {
  background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
 #arrow {
    width: 100%;
    height: 80px;
    text-align: center;
    cursor: pointer;
	font-weight: bold;
    position: fixed;
    bottom: 0;
    left: 0;
    border: 0;
    outline: 0;
    z-index: 100;
    color: red;
    background: transparent;
    -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    font: 66px Heiti, 'Lucida Grande', Arial;
    font-weight: bold;
}
#arrow span {
    display: inline-block;
    position: relative;
    top: -18px;
    -moz-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#arrow:hover {
    background: #EC008C;
}
#arrow:hover span {
    top: 0;
    color: #FFF;
}
 .intro {
    position: absolute;
    bottom: 100px;
    text-align: center;
    width: 100%;
}
.intro h1 {
    font-size: 5em;
    font-weight: bold;
    color: #000;
}
#section4 .intro {
    color: #000;
	background-color: #bbb;
}
.pp-scrollable {
background-color: #bbb;
}
 .header {
    padding-top: 80px;
    text-align: center;
}
.header h1 {
    font-size: 5em;
    font-weight: bold;
    color: #fff;
}
.header p {
    color: #f2f2f2;
    font-size: 1.7em;
}
.page {
    width: 80%;
    margin: 60px auto;
    background:white;
    padding: 60px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page p {
    font-style: 12px;
    margin: 20px 0 0 0;
    line-height: 1.35em;
    color: #333;
}
body {
  background-color: #555;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
 color: black;
  margin: 20px;
   text-align: center; 
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
}
h3 {
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  font-size: 2em;
  white-space: nowrap;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
h2 { 
text-align: center; 
color: #26a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: bold; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
button.center-block {
  margin-top: 20px;
  display: block;
  width: 60%;
  line-height: 2em;
  background: rgba(114,212,202,1);
  border-radius: 5px;
  border: 0;
  border-top: 1px solid #B2ECE6;
  box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389;
  color: #FFFFFF;
  font-size: 1.5em;
  text-align: center;
  text-shadow: 0 1px 2px #21756A;
}
button.center-block:hover {
 background: linear-gradient(to bottom, rgba(107,198,186,1) 0%,rgba(57,175,154,1) 100%);  
}
button.center-block:active {
  box-shadow: inset 0 0 5px #000;
  background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%); 
}
button.center-block:focus {
    outline: none;
    border-color: green;
}
</style>
<body>
<h3> Example </h3>
		<h2> How to Create PagePilling using JQuery </h2>
		<center>
	<button id = "arrow"> <span> ? </span>
</button>
<div id = "pagepiling">
    <div class = "section" id = "section1">
        <div class = "intro">
            	<h1> Pile 1. </h1> 
        
        </div>
    </div>
    <div class = "section" id = "section2">
        <div class = "intro">
            	<h1> Pile 2. </h1>
        </div>
    </div>
    <div class = "section" id = "section3">
        <div class = "intro">
             <h1> Pile 3. </h1>         
        </div>
    </div>
    <div class = "section pp-scrollable" id = "section4">
        <div class = "intro">
             <h1> Pile 3. </h1>         
        </div>
    </div>
</div>
<script>
$('#pagepiling').pagepiling({
    verticalCentered: false,
    css3: false,
    sectionsColor: ['white', '#E8E8E8', '#f2f2f2', '#EC008C'],
    onLeave: function (index, nextIndex, direction) {
        $('.section').eq(index - 1).find('h1, p').fadeOut(700, 'easeInQuart');
        $('.section').eq(nextIndex - 1).find('h1, p').fadeIn(700, 'easeInQuart');
        if (nextIndex == 4) {
            $('#arrow').hide();        
            $('#pp-nav').fadeOut();
            $('#section4').find('.content').animate({
                top: '0%'
            }, 700, 'easeInQuart');
        }       
        if (index == 4) {
            $('#arrow').show();         
            $('#pp-nav').fadeIn();
            $('#section4 .content').animate({
                top: '100%'
            }, 700, 'easeInQuart');
        }
    },
});
$('#arrow').click(function () {
    $.fn.pagepiling.moveSectionDown();
});
</script>
</body>
</html>

Explanations

In the above example, we have created the basic working of the pagePiling. It supports interactive scrolling of different web layout pages with the down arrow, scrolling, and side navigation.

Output:

Following is the output of the example.