Download raw (4.1 KB)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>fullPage.js One Page Scroll Sites</title> <meta name="author" content="Alvaro Trigo Lopez" /> <meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." /> <meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" /> <meta name="Resource-type" content="Document" /> <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /> <link rel="stylesheet" type="text/css" href="example2.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.9.1/jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.fullPage.js"></script> <script type="text/javascript"> $(document).ready(function() { var pepe = $.fn.fullpage({ slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], menu: '#menu' }); }); </script> </head> <body> <a href="https://github.com/alvarotrigo/fullPage.js"><img style="position: fixed;z-index:99; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://http://alvarotrigo.com/fullPage/" data-text="Great plugin to create fullscreen scrolling websites: http://alvarotrigo.com/fullPage/">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <ul id="menu"> <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li> <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li> <li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li> </ul> <div class="section " id="section0"> <h1>fullPage.js</h1> <p>Create Beautiful Fullscreen Scrolling Websites</p> <img src="imgs/fullPage.png" alt="fullPage" /> </div> <div class="section" id="section1"> <div class="slide"> <div class="intro"> <h1>Create Sliders</h1> <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p> <img src="imgs/slider.png" alt="slider" /> </div> </div> <div class="slide"> <div class="intro"> <img src="imgs/1.png" alt="simple" /> <h1>Simple</h1> <p>Easy to use. Configurable and customizable.</p> </div> </div> <div class="slide"> <div class="intro"> <img src="imgs/2.png" alt="Cool" /> <h1>Cool</h1> <p>It just looks cool. Impress everybody with a simple and modern web design!</p> </div> </div> <div class="slide"> <div class="intro"> <img src="imgs/3.png" alt="Compatible" /> <h1>Compatible</h1> <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p> </div> </div> </div> <div class="section" id="section2"> <div class="intro"> <h1>Example</h1> <p>HTML markup example to define 4 sections.</p> <img src="imgs/example2.png" alt="example" /> </div> </div> <div class="section" id="section3"> <div class="intro"> <h1>Working On Tablets</h1> <p> Designed to fit to different screen sizes as well as tablet and mobile devices. <br /><br /><br /><br /><br /><br /> </p> </div> <img src="imgs/tablets.png" alt="tablets" /> </div> </body> </html>