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 - Callbacks</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" /> | |
| <!--[if IE]> | |
| <script type="text/javascript"> | |
| var console = { log: function() {} }; | |
| </script> | |
| <![endif]--> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> | |
| <script type="text/javascript" src="../jquery.pagepiling.min.js"></script> | |
| <script type="text/javascript"> | |
| var deleteLog = false; | |
| $(document).ready(function() { | |
| $('#pagepiling').pagepiling({ | |
| menu: '#menu', | |
| anchors: ['page1', 'page2', 'page3'], | |
| sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'], | |
| onLeave: function(index, nextIndex, direction){ | |
| if(deleteLog){ | |
| $('#callbacksDiv').html(''); | |
| } | |
| $('#callbacksDiv').append('<p>onLeave - index:' + index + ' nextIndex:' + nextIndex + ' direction:' + direction + '</p>') | |
| }, | |
| afterRender: function(){ | |
| $('#callbacksDiv').append('<p>afterRender</p>'); | |
| }, | |
| afterLoad: function(anchorLink, index){ | |
| $('#callbacksDiv').append('<p>afterLoad - anchorLink:' + anchorLink + " index:" + index + '</p>'); | |
| //section 2 | |
| if(index == 2){ | |
| //moving the image | |
| $('#section2').find('.intro').delay(100).animate({ | |
| left: '0%' | |
| }, 1500, 'easeOutExpo', function(){ | |
| $('#section2').find('p').first().fadeIn(700, function(){ | |
| $('#section2').find('p').last().fadeIn(600); | |
| }); | |
| }); | |
| } | |
| //section 3 | |
| if(anchorLink == 'page3'){ | |
| //section 3 | |
| $('#section3').find('.intro').delay(100).animate({ | |
| left: '0%' | |
| }, 1500, 'easeOutExpo'); | |
| } | |
| deleteLog = true; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| #section2 .intro{ | |
| left: -150%; | |
| position: relative; | |
| } | |
| #section2 p{ | |
| display: none; | |
| } | |
| #section3 .intro{ | |
| left: 140%; | |
| position: relative; | |
| } | |
| </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 style="position:fixed;top:50px;left:50px;color:white;z-index:999;" id="callbacksDiv"></div> | |
| <div id="pagepiling"> | |
| <div class="section" id="section1"> | |
| <h1>Callbacks</h1> | |
| <p>Totally open to your imagination!</p> | |
| <br /> | |
| </div> | |
| <div class="section" id="section2"> | |
| <div class="intro"> | |
| <h1>Feel free</h1> | |
| <p>All the callbacks you need to do whatever you need.</p> | |
| <p>Just what you would expect.</p> | |
| </div> | |
| </div> | |
| <div class="section" id="section4"> | |
| <div class="intro"> | |
| <h1>Ideal for animations</h1> | |
| <p>Total control over your website.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |