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</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() { | |
| /* | |
| * Plugin intialization | |
| */ | |
| $('#pagepiling').pagepiling({ | |
| menu: '#menu', | |
| anchors: ['page1', 'page2', 'page3', 'page4'], | |
| sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'], | |
| navigation: { | |
| 'position': 'right', | |
| 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4'] | |
| }, | |
| afterRender: function(){ | |
| $('#pp-nav').addClass('custom'); | |
| }, | |
| afterLoad: function(anchorLink, index){ | |
| if(index>1){ | |
| $('#pp-nav').removeClass('custom'); | |
| }else{ | |
| $('#pp-nav').addClass('custom'); | |
| } | |
| } | |
| }); | |
| /* | |
| * Internal use of the demo website | |
| */ | |
| $('#showExamples').click(function(e){ | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| $('#examplesList').toggle(); | |
| }); | |
| $('html').click(function(){ | |
| $('#examplesList').hide(); | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| /* Section 1 | |
| * --------------------------------------- */ | |
| #section1 h1{ | |
| color: #444; | |
| } | |
| #section1 p{ | |
| color: #333; | |
| color: rgba(0,0,0,0.3); | |
| } | |
| #section1 img{ | |
| margin: 20px 0; | |
| opacity: 0.7; | |
| } | |
| /* Section 2 | |
| * --------------------------------------- */ | |
| #section2 h1, | |
| #section2 p{ | |
| z-index: 3; | |
| } | |
| #section2 p{ | |
| opacity: 0.8; | |
| } | |
| #section2 #colors{ | |
| right: 60px; | |
| bottom: 0; | |
| position: absolute; | |
| height: 413px; | |
| width: 258px; | |
| background-image: url(imgs/colors.gif); | |
| background-repeat: no-repeat; | |
| } | |
| /* Section 3 | |
| * --------------------------------------- */ | |
| #section3 #colors{ | |
| left: 60px; | |
| bottom: 0; | |
| } | |
| #section3 p{ | |
| color: #757575; | |
| } | |
| #colors2, | |
| #colors3{ | |
| position: absolute; | |
| height: 163px; | |
| width: 362px; | |
| z-index: 1; | |
| background-repeat: no-repeat; | |
| left: 0; | |
| margin: 0 auto; | |
| right: 0; | |
| } | |
| #colors2{ | |
| background-image: url(imgs/colors2.gif); | |
| top:0; | |
| } | |
| #colors3{ | |
| background-image: url(imgs/colors3.gif); | |
| bottom:0; | |
| } | |
| /* Section 4 | |
| * --------------------------------------- */ | |
| #section4 p{ | |
| opacity: 0.6; | |
| } | |
| /* Overwriting fullPage.js tooltip color | |
| * --------------------------------------- */ | |
| #pp-nav.custom .pp-tooltip{ | |
| color: #AAA; | |
| } | |
| #markup{ | |
| display: block; | |
| width: 450px; | |
| margin: 20px auto; | |
| text-align: left; | |
| } | |
| </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> | |
| <li data-menuanchor="page4"><a href="#page4">Page 4</a></li> | |
| </ul> | |
| <div id="pagepiling"> | |
| <div class="section" id="section1"> | |
| <h1>pagePiling.js</h1> | |
| <p>Create an original scrolling site</p> | |
| <img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /> | |
| <br /> | |
| </div> | |
| <div class="section" id="section2"> | |
| <div class="intro"> | |
| <div id="colors"></div> | |
| <h1>jQuery plugin</h1> | |
| <p>Pile your sections one over another and access them scrolling or by URL!</p> | |
| <div id="markup"> | |
| <script src="https://gist.github.com/alvarotrigo/4a87a4b8757d87df8a72.js"></script> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section" id="section3"> | |
| <div class="intro"> | |
| <h1>Configurable</h1> | |
| <p>Plenty of options, methods and callbacks to use.</p> | |
| <div id="colors2"></div> | |
| <div id="colors3"></div> | |
| </div> | |
| </div> | |
| <div class="section" id="section4"> | |
| <div class="intro"> | |
| <h1>Compatible</h1> | |
| <p>Designed to work on tablet and mobile devices.</p> | |
| <p>Oh! And its compatible with old browsers such as IE 8 or Opera 12!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |