Simple One Page Navigation/Scrolling with Fullpage.js

Category: Javascript , Layout | November 18, 2014
Author: powy1993
Views Total: 3,438
Official Page: Go to website
Last Update: November 18, 2014
License: MIT

Preview:

Simple One Page Navigation/Scrolling with Fullpage.js

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

});

You Might Be Interested In:

One thought on “Simple One Page Navigation/Scrolling with Fullpage.js

  1. Ingo Schön

    Ahoj, nice one. one question … what to change for let the containers only sliding from top to bottom. like reverse Y

    Reply

Leave a Reply