Creating Apple-Like Fullscreen One Page Scrolling Website with jQuery
File Size: | 12.1 KB |
---|---|
Views Total: | 10754 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.