পৃষ্ঠাসমূহ

.

Search Your Article

Total Pageviews

Tuesday, February 28, 2017

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 = "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 −
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)