Creating Apple-Like Fullscreen One Page Scrolling Website with jQuery

UI Page Scrolling is a stunning jQuery plugin for creating an Apple iPhone 5S/5C website style fullscreen one page scroller that allows to vertically or horizontally navigate through different sections of your page.

Check the Horizontal Demo.

You might also like:

• Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery
• Apple-Like Vertical One Page Scrolling Plugin For jQuery - slidescroll
• jQuery Dynamic One Page Scrolling Plugin - Scrolld.js
• Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery
• jQuery Plugin For Fullscreen One Page Scrolling Websites - fullPage.js
• Yet Another One Page Slider Plugin with jQuery - Wolfe.js

How to use it:

1. Include the latest version of jQuery javascript library in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

2. Include jQuery UI Page Scrolling's script and stylesheet files in the page, after jQuery library.

<script type="text/javascript" src="UIPageScrolling.js"></script>
<link rel="stylesheet" href="UIPageScrolling.css" type="text/css">

3. The Html for the controls.

<ul class="page-control">
<li class="page-control__item"></li>
<li class="page-control__item"></li>
<li class="page-control__item"></li>
</ul>

4. The Html for the main content.

<div class="main">

<section class="item standart">
<div class="item__description text-block">
<div class="text-block__header text-block__line">Section 1</div>
</section>

<section class="item red">
<div class="item__description text-block">
<div class="text-block__header">Section 2</div>
</div>
</section>

<section class="item green">
<div class="item__description text-block">
<div class="text-block__header">Section 3</div>
</section>

...

</div>

4. Initialize the plugin.

<script>
$(function() {
$(".main").UIPageScrolling({
sectionsControl:".page-control__item"
});
})
</script>

5. Available parameters to customize the one page scroller.

<script>
$(function() {
$(".main").UIPageScrolling({
sections : "section",
easing : "ease",
time : 1000,
beforeMoveFunc : null,
afterMoveFunc : null,
isCyclic : false,
isVertical : true,
sectionsControl : null,
captureKeyboard : false
});
})
</script>

Change log:

2014-05-04

• fix mouse support

2014-01-21

• fixed touch events.

2014-01-20

• touch\mouse events

---

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