Apple-Like Vertical One Page Scrolling Plugin For jQuery - slidescroll

slidescroll is a jQuery plugin to create a Apple's iPhone 5S website style one page scrolling website that allows to vertically navigate between different sections with smooth effects. The plugin works with all the modern browsers which support CSS3 transitions and transforms.

Features:

• Simple, easy and responsive.
• Supports mousewheel, touch swipe, keyboard and dots navigation.
• Supports callbacks before and after a page changed.

You might also like:

• Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery
• 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

How to use it:

1. Markup html structure.

<div class="slidescroll-wrap"><!-- this element is required -->
<div class="main"><!-- this element will be animated -->
<div class="page" id="start" data-slidescroll-title-selector="h1">
<h1>First Page</h1>
<p>Your Content</p>
</div>
<div class="page" id="second" data-slidescroll-title="Second"><!-- these elements hold each content page -->
<h2>Second Page</h2>
<p>Your Content</p>
</div>
<div id="third" class="page" data-slidescroll-title-selector="h2">
<h2>Third page</h2>
<p>Your Content</p>
</div>
</div>
</div>

2. Load the required javascript files on the web page.

<script src="modernizr.custom.92573.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.mousewheel.js"></script> 
<script src="jquery.slidescroll.js"></script> 

3. Put styles in your CSS and change it to your taste.

.slidescroll-enabled, .slidescroll-enabled body {
height: 100%;
}
.slidescroll-enabled .slidescroll-wrap {
position: relative;
height: 100%;
overflow: hidden;
}
.slidescroll-enabled .main, .slidescroll-enabled .page {
position: relative;
height: 100%;
}
.slidescroll-enabled .main {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ie-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-ie-transition: -ie-transform 1s ease;
transition: transform 1s ease;
top: 0;
}
.slidescroll-enabled .page {
position: absolute;
top: 0;
left: 0;
}
.slidescroll-nav {
position: absolute;
top: 50%;
right: 20px;
}
.slidescroll-nav a {
text-decoration: none;
cursor: pointer;
overflow: hidden;
}
.slidescroll-nav a, .slidescroll-nav span {
position: relative;
display: block;
}
.slidescroll-nav span {
line-height: 20px;
}
.slidescroll-nav .index {
position: absolute;
top: 8px;
right: 3px;
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: #777;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.slidescroll-nav .active .index {
top: 5px;
right: 0;
width: 8px;
height: 8px;
background: transparent;
border: 1px solid #777;
}
.slidescroll-nav .title {
text-align: right;
padding-right: 20px;
color: #777;
opacity: 0;
font-size: em(12);
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ie-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.slidescroll-nav a:hover .title {
opacity: 1;
}

4. Initialize the plugin with options.

<script>
$(document).ready( function() {
$('.main').slidescroll({
'pagesSelector': '.page'
css3: win.Modernizr.csstransforms3d, // Enable the use of CSS3 transforms instead of relative positioning for smoother performance on most devices.
initialPage: 0, // Also available as data-attribute slidescroll-initial-page. Allows you to set the page loaded on startup. Please note that the location.hash will override this setting.
generateNavigation: true, // Generates a simple navigation for the available pages.
activeClassName: 'active', // Defines the className used for the active element in the generated navigation
moved: null, // callback function
beforemove: null, // callback function
animationDuration: 1000, // The animation duration should be set to the same value used in the css file.
namespace: 'slidescroll' // Adjust the prefix used for CSS classNames and data-attribute prefixes
});
});
</script>

---

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