Minimal One Page Scrolling Effect with Pure JavaScript – onepagescroll.js

Preview:

Description:

onepagescroll.js is a lightweight JavaScript library that makes it easier to create a smooth scrolling effect with a side page navigation for your one-page website / single page application. Keyboard navigation and touch events supported.

How to use it:

Add page sections to your webpage.

<div class="pages">
  <section>Section ONE</section>
  <section>Section TWO</section>
  <section>Section THREE</section>
  <section>Section FOUR</section>
  <section>Section FIVE</section>
</div>

Add references to onepagescroll.css and onepagescroll.js to the webpage.

<link href="onepagescroll.css" rel="stylesheet">
<script src="onepagescroll.js"></script>

Call the onepagescroll() function on the top container.

onepagescroll('div.pages');

Customize the one page scrolling effect with the following options.

onepagescroll('div.page',{
  //child elements selector. use if you don't want to use section for page.
  pageContainer: 'section',     
  //determine css3 animation that will run when page changes
  //ex) 'ease', 'ease-out-in', 'cubic-bezier(0.2, 0.75, 0.5, 1.15)'
  animationType: 'ease-in-out', 
  //define how long each page takes to animate, 0 for off
  animationTime: 500,        
  //back to the last/first page when you scroll at first/last page   
  infinite: true,           
  //set show or hide pagination element.    
  pagination: true,             
  //allow up/page-up and down/page-down key for page scroll
  keyboard: true,           
  //determine direction of page scroll. options available are 'vertical' and 'horizontal'    
  direction: 'vertical'        
   
});