Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
Cannot retrieve contributors at this time
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>pagePiling.js plugin - Video Background</title> | |
| <meta name="author" content="Alvaro Trigo Lopez" /> | |
| <meta name="description" content="pagePiling.js plugin by Alvaro Trigo." /> | |
| <meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" /> | |
| <meta name="Resource-type" content="Document" /> | |
| <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.pagepiling.css" /> | |
| <link rel="stylesheet" type="text/css" href="examples.css" /> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="../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> | |
| /* Centered texts in each section | |
| * --------------------------------------- */ | |
| .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 */ | |
| } | |
| /* Layer with position absolute in order to have it over the video | |
| * --------------------------------------- */ | |
| #section1 .layer{ | |
| position: absolute; | |
| z-index: 5; | |
| width: 100%; | |
| left: 0; | |
| top: 43%; | |
| height: 100%; | |
| } | |
| #section1 h1{ | |
| color:#fff; | |
| } | |
| #infoMenu li a{ | |
| color: #fff; | |
| } | |
| #section1{ | |
| overflow: hidden; | |
| } | |
| </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 class="layer"> | |
| <h1>pagePiling.js video</h1> | |
| </div> | |
| </div> | |
| <div class="section" id="section2"> | |
| <div class="intro"> | |
| <h1>No limits</h1> | |
| <p>Anything is possible with pagePiling.js!</p> | |
| </div> | |
| </div> | |
| <div class="section" id="section4"> | |
| <div class="intro"> | |
| <h1>afterRender</h1> | |
| <p>Don't forget to use afterRender callback for it!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |