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

<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml">

 

   <head>

      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />

      <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/src/pagepilling/jquery.pagepiling.css" />

                                    

      <link rel = "stylesheet" type = "text/css"

         href = "/jquery/src/pagepilling/examples.css" />

 

      <script

         src = "http://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>