Minimal One Page Scrolling with jQuery and CSS3 - pagescroll

pagescroll is a super lightweight jQuery one page scrolling plugin that utilizes CSS3 3D transforms for page transition effects, with a a fallback to jQuery's animate() when CSS3 are not supported.

How to use it:

1. Split your one page website into several sections. With this plugin, you can horizontally or vertically navigate through these content sections with arrow keys.

<div id="container">
  <div class="section active" id="section0"> </div>
  <div class="section" id="section1"> </div>
  <div class="section" id="section2"> </div>
  <div class="section" id="section3"> </div>
</div>

2. Make the content sections 100% height and width.

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

#container,
.section {
  height: 100%;
  position: relative;
}

3. Load jQuery library and jQuery pagescroll plugin at the end of the document..

<script src="jquery.min.js"></script> 
<script src="onepagescroll.js"></script> 

4. Call the plugin on the wrapper element and set the position of page transitions.

$('#container').onepagescroll({
  'direction': 'vertical'
})  

5. Full plugin options.

$('#container').onepagescroll({

// animation duration in ms
'duration': 500,

// horizontal or vertical
'direction': 'horizontal',

// show side pagination
'showpages': true

})  

---

This awesome jQuery plugin is developed by justnode. For more Advanced Usages, please check the demo page or visit the official website.