Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery

File Size: 187 KB
Views Total: 22780
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery

One Page Scroll is a fashion and fast jQuery plugin for creating responsive full-screen one page scroll effects with dots navigation, similar to the new Apple iPhone 5S / 5C website.

How to use it:

1. Include jQuery javascript library and jQuery One Page Scroll plugin on the page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>

2. Include required jQuery One Page Scroll stylesheet on the page

<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>

3. Markup html structure

<div class="main">
<section class="page1">
... SECTION 1 ...
</section>
<section class="page2">
... SECTION 2 ...
</section>
<section class="page3">
... SECTION 3 ...
</section>
</div>

4. Call the plugin

<script>
$(document).ready(function(){
$(".main").onepage_scroll({
sectionContainer: "section"
});
});
</script>

Change log:

2014-08-27

  • Fix bower, add IE support, spacebar shortcut key

2014-01-26

  • Fix input not working on responsive fallback

2013-11-07

  • Fix beforeMove not running on moveTo method
  • Add responsive fallback and moveTo public method

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