Educational

Page Pilling

Written by

Saim Khalid

in

pagePiling.js is a jQuery plug-in for ‘piling’ your layout sections over one another and accessing them by scrolling.

A Simple of theming example as shown below −

<!DOCTYPE html><html xmlns = "https://www.w3.org/1999/xhtml"><head><meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /><link rel = "stylesheet" type = "text/css" 

     href = "https://fonts.googleapis.com/css?family=Lato:300,400,700" /&gt;&lt;link rel = "stylesheet" type = "text/css" 
     href = "/jquery/src/pagepilling/jquery.pagepiling.css" /&gt;&lt;link rel = "stylesheet" type = "text/css" 
     href = "/jquery/src/pagepilling/examples.css" /&gt;&lt;script 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script type = "text/javascript" 
     src = "/jquery/src/pagepilling/jquery.pagepiling.min.js"&gt;&lt;/script&gt;&lt;script type = "text/javascript"&gt;
     $(document).ready(function() {
        $('#pagepiling').pagepiling({
           menu: '#menu',
           anchors: ['page1', 'page2', 'page3', 'page4'],
           sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'],
				
           navigation: {
              'position': 'right',
              'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
           },
           afterRender: function(){
              //playing the video
              $('video').get(0).play();
           }
        });
     });
  &lt;/script&gt;&lt;style&gt;
	   .section {
        text-align:center;
     }
     #myVideo {
        position: absolute;
        z-index: 4;
        right: 0;
			
        bottom: 0;
        top:0;
        right:0;
        width: 100%;
        height: 100%;
			
        background-size: 100% 100%;
        background-color: black; /* in case the video doesn't fit the whole page*/
        background-image: /* our video */;
        background-position: center center;
        background-size: contain;
        object-fit: cover; /*cover video background */
     }
     #section1 .layer {
        position: absolute;
        z-index: 5;
        width: 100%;
        left: 0;
        top: 43%;
        height: 100%;
     }
     #section1 h1 {
        color:#fff;
     }
     #infoMenu li a {
        color: #fff;
     }
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;ul id = "menu"&gt;&lt;li data-menuanchor = "page1" class = "active"&gt;&lt;a href = "#page1"&gt;Page 1&lt;/a&gt;&lt;/li&gt;&lt;li data-menuanchor = "page2"&gt;&lt;a href = "#page2"&gt;
        Page 2&lt;/a&gt;&lt;/li&gt;&lt;li data-menuanchor = "page3"&gt;&lt;a href = "#page3"&gt;
        Page 3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div id = "pagepiling"&gt;&lt;div class = "section" id = "section1"&gt;&lt;video autoplay loop muted id = "myVideo"&gt;&lt;source src = "imgs/flowers.mp4" type = "video/mp4"&gt;&lt;source src = "imgs/flowers.webm" type = "video/webm"&gt;&lt;/video&gt;&lt;/div&gt;&lt;div class = "section" id = "section2"&gt;&lt;div class = "intro"&gt;&lt;h1&gt;No limits&lt;/h1&gt;&lt;p&gt;Anything is possible with Tutorialspoint&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class = "section" id = "section4"&gt;&lt;div class = "intro"&gt;&lt;h1&gt;&lt;/h1&gt;&lt;p&gt;Simple Easy Learning&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts