• jQuery Video Tutorials

jQuery - Page Pilling

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 −

Live Demo 
<!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" />
			
      <link rel = "stylesheet" type = "text/css" 
         href = "/jquery/src/pagepilling/jquery.pagepiling.css" />
			
      <link rel = "stylesheet" type = "text/css" 
         href = "/jquery/src/pagepilling/examples.css" />

      <script 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
      </script>

      <script type = "text/javascript" 
         src = "/jquery/src/pagepilling/jquery.pagepiling.min.js">
      </script>
		
      <script type = "text/javascript">
         $(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();
               }
            });
         });
      </script>

      <style>
    	   .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;
         }
      </style>
   </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>
      </ul>

      <div id = "pagepiling">
        <div class = "section" id = "section1">
            <video autoplay loop muted id = "myVideo">
               <source src = "imgs/flowers.mp4" type = "video/mp4">
               <source src = "imgs/flowers.webm" type = "video/webm">
            </video>
         </div>
			
         <div class = "section" id = "section2">
            <div class = "intro">
               <h1>No limits</h1>
               <p>Anything is possible with Tutorialspoint</p>
            </div>
         </div>
			
         <div class = "section" id = "section4">
            <div class = "intro">
               <h1></h1>
               <p>Simple Easy Learning</p>
            </div>
         </div>
         
      </div>
   </body>
</html>

This should produce following result −

Advertisements