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 −
Leave a Reply