iPhone 5S Website-Like One Page Scrolling Effect with Javascript and CSS3

Preview:

Description:

An awesome Javascript component made by peachananr that helps you create a fullscreen vertical one page scrolling effect as you see in Apple’s iPhone 5S webpage. You can scroll through a set of sections with auto snapping by mouse wheel, keyboard or by clicking the side navigation.

Basic Usage:

Add the onepage-scroll.css and onepagescroll.js in the head section of your web page.

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

The Html markup should be like this:

<div class="main">
  <section>...</section>
  <section>...</section>
  ... 
</div>

The Javascript to enable the scrolling effect.

onePageScroll(".main");

These are some options to custom the scrolling effect.

onePageScroll(".main", {
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
loop: false,
responsiveFallback: false
});