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.

Next TopicQR Code Generator using HTML, CSS, and jQuery

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}