Author: | powy1993 |
---|---|
Views Total: | 4,047 views |
Official Page: | Go to website |
Last Update: | November 18, 2014 |
License: | MIT |
Preview:

Description:
Fullpage.js is a lightweight JavaScript library used to create an one page navigation which allows you to navigate through the content sections with fancy CSS3 transform based animations.
Basic Usage:
Load the fullpage.js script at the end of your one page scrolling website.
<script src="js/fullPage.min.js"></script>
Split your main content into several sections.
<div id="pageContain"> <div class="page page1 current"> <div class="contain"> </div> </div> <div class="page page2"> <div class="contain"> </div> </div> <div class="page page3"> <div class="contain"> </div> </div> ... </div>
Add a side navigation bar which allows the visitor to scroll to desired sections.
<ul id="navBar"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul>
The core CSS to style the content sections & navigation bar.
#pageContain { overflow: hidden; } .page { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .contain { width: 100%; height: 100%; display: none; position: relative; z-index: 0; } .current .contain, .slide .contain { display: block; } .current { display: block; z-index: 1; } .slide { display: block; z-index: 2; } .swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important; } .page1 { background: #37c1e3; } .page2 { background: #009922; } .page3 { background: #992211; } .page4 { background: #ff00ff; } .page5 { background: #00ff00; } .page6 { background: #22ffff; } #navBar { z-index: 3; position: absolute; top: 10%; right: 3%; } #navBar .active { background: #ccc; } #navBar li { cursor: pointer; margin-bottom: 10px; transition: all .7s ease; border-radius: 50%; line-height: 40px; text-align: center; width: 40px; height: 40px; }
Enable the one page navigation.
var runPage; runPage = new FullPage({ // id of contain id : 'pageContain', // slide animation speed slideTime : 800, // slide animation effect : { transform : { // 'X'|'Y'|'XY'|'none' translate : 'Y', // [scalefrom, scaleto] scale : [.1, 1], // [rotatefrom, rotateto] rotate : [270, 0] }, // [opacityfrom, opacityto] opacity : [0, 1] }, // mode of fullpage mode : 'wheel,touch,nav:navBar', // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] ) easing : 'ease', // callback when pageChange callback : function(index, thisPage) {} });
Ahoj, nice one. one question … what to change for let the containers only sliding from top to bottom. like reverse Y