Simple One Page Navigation/Scrolling with Fullpage.js

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) {}
});