Feb 21, 2015

Ketan Patel

Create Beautiful Fullscreen Scrolling Websites using pagePiling.js


In today's web design and development world, continuous changes and improvements are being made to make the web experience better and better. In this process, the role of JavaScript and jQuery plugins is very important. In this tutorial we'll be learning one of the same jQuery plugin called "pagePiling.js" to create a scrolling pile of sections for your website.


Before jumping into the steps of creating a Fullscreen Scrolling webpage with pagePiling.js, why don’t we have a look at what pagePiling.js really is?

Created By : alvarotrigo

Demo | Download



What pagePiling.js does?



pagePiling.js Pile your web page sections one over another to access them scrolling or by URL! by doing so it provides amazing user experience.


Resources List



Before we can start working on creating a Fullscreen Scrolling webpage, we need to have some resources using which we can the page. Below is the list of all the resources that we will be needing:

(1) Nice Background Images : In this tutorial i will be using the images that comes with the example demo of pagePiling.js package.

(2) pagepiling.js : You will get the pagepiling.js in the example package.  

(3) jQuery library (you can download the latest version of jQuery from jquery.com) 

(4) pagepiling.css : You will get the pagepiling.css in the example package.


Installation


There are two options to downloading pagepiling.js. First one is to download from its GitHub repository and the second is to use Bower. To install it using Bower just run the following command:



bower install pagepiling.js



CSS


Our css in this tutorial will consist of styling for the webpage body having sections with custom elements added. CSS classes are self explanatory.


<style>
    /* Section 1
  * --------------------------------------- */
 #section1 h1{
  color: #444;
 }
 #section1 p{
  color: #333;
  color: rgba(0,0,0,0.3);
 }
 #section1 img{
  margin: 20px 0;
  opacity: 0.7;
 }

 /* Section 2
  * --------------------------------------- */
 #section2 h1,
 #section2 p{
  z-index: 3;
 }
 #section2 p{
  opacity: 0.8;
 }

 #section2 #colors{
  right: 60px;
  bottom: 0;
  position: absolute;
  height: 413px;
  width: 258px;
  background-image: url(imgs/colors.gif);
  background-repeat: no-repeat;
 }

 /* Section 3
  * --------------------------------------- */
 #section3 #colors{
  left: 60px;
  bottom: 0;
 }
 #section3 p{
  color: #757575;
 }

 #colors2,
 #colors3{
  position: absolute;
  height: 163px;
  width: 362px;
  z-index: 1;
  background-repeat: no-repeat;
  left: 0;
  margin: 0 auto;
  right: 0;
 }
 #colors2{
  background-image: url(imgs/colors2.gif);
  top:0;
 }
 #colors3{
  background-image: url(imgs/colors3.gif);
  bottom:0;
 }

 /* Section 4
  * --------------------------------------- */
 #section4 p{
  opacity: 0.6;
 }

 /* Overwriting fullPage.js tooltip color
 * --------------------------------------- */
 #pp-nav.custom .pp-tooltip{
  color: #AAA;
 }
 #markup{
  display: block;
  width: 450px;
  margin: 20px auto;
  text-align: left;
 }

</style>

Javascript


Now its time to work on the javascript part. All you need to do is call the plugin inside a $(document).ready function:


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


but in case if you want to make some more complex initialization with more options then it will look like as below,


<script type="text/javascript">
  $(document).ready(function() {

   /*
   * Plugin intialization
   */
      $('#pagepiling').pagepiling({
       menu: '#menu',
       anchors: ['page1', 'page2', 'page3', 'page4'],
       sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
       navigation: {
        'position': 'right',
        'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
       },
       afterRender: function(){
        $('#pp-nav').addClass('custom');
       },
       afterLoad: function(anchorLink, index){
        if(index>1){
         $('#pp-nav').removeClass('custom');
        }else{
         $('#pp-nav').addClass('custom');
        }
       }
   });

     });
    </script>


HTML


There are some requirements for the HTML structure like , each section needs to defined with a div containing the section class. To make any section active, just add the active class otherwise the first section will be considered as default and treated as Home page .


A simple structure will be like this :


<div id="pagepiling">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>


Inside each sections you can add anything as per the requirements like menus, images, sidebars etc,.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>pagePiling.js plugin</title>
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400,700" />
 <link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" />
 <link rel="stylesheet" type="text/css" href="examples.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.pagepiling.min.js"></script>
</head>
<body>
 <ul id="menu">
  <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
  <li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
  <li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
  <li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
 </ul>


 <div id="pagepiling">
     <div class="section" id="section1">
      <h1>pagePiling.js</h1>
   <p>Create an original scrolling site</p>
   <img src="imgs/pagePiling-plugin.gif" alt="pagePiling" />
   <br />

     </div>
     <div class="section" id="section2">
      <div class="intro">
       <div id="colors"></div>
       <h1>jQuery plugin</h1>
       <p>Pile your sections one over another and access them scrolling or by URL!</p>
       <div id="markup">
        <script src="https://gist.github.com/alvarotrigo/4a87a4b8757d87df8a72.js"></script>
       </div>
      </div>
     </div>
     <div class="section" id="section3">
      <div class="intro">
       <h1>Configurable</h1>
       <p>Plenty of options, methods and callbacks to use.</p>
       <div id="colors2"></div>
       <div id="colors3"></div>
      </div>
     </div>
     <div class="section" id="section4">
      <div class="intro">
       <h1>Compatible</h1>
       <p>Designed to work on tablet and mobile devices.</p>
       <p>Oh! And its compatible with old browsers such as IE 8 or Opera 12!</p>
      </div>
     </div>
 </div>

</body>
</html>


Compatibility


pagePiling.js is fully compatible with all modern browsers, as well as some old browsers also such as Internet Explorer 8, 9, Opera 12, etc.

It works with browsers with CSS3 support and with the ones which don't have it, making it ideal for old browsers compatibility. Moreover it's also designed to work on touch devices such as mobile phones or tablets.


Usage


As shown above , to make a complete Fullscreen Scrolling webpage you need to put all things together. You will need to include the JavaScript file 'jquery.pagepiling.js' (or the minified version 'jquery.pagepiling.min.js') and the css file 'jquery.pagepiling.css' of the plugin, as well as [jQuery](http://jquery.com/). Optionally, you can add the [jQuery UI library](http://jqueryui.com/) in case you want to use other easing effects apart from the ones included in the jQuery library which are the 'linear' or 'swing' effects.


License


pagePiling.js is offered under the MIT license which means you can use it free of charge for any commercial and private projects.


Advantages


- Fullscreen Scrolling Webpage.
- MIT License.
- Compatible with all modern browsers, as well as old ones(IE 8, 9, Opera 12, etc).
- Suitable for the touch devices such as mobile phones or tablets.
- Easy to use and Implement.
- Highly Customizable
        - support for horizontal and verticle scrolling
        - scrolling speed can be configured
        - support for page looping
        - support for fullscreen video and image background



Demo | Download


Ketan Patel

About Ketan Patel -

I have developed a wide range of websites using CorePHP, Opencart, CakePHP and CodeIgniter including sites for startup companies and small businesses. Apart from my blogging life, I like to read Novels, Listening music and Net surfing.

Subscribe to this Blog via Email :