jQuery Plugin For One Page Parallax Scrolling Website - Page Slider

pageslider is a jQuery plugin which allows the visitor to use mouse wheel to navigate between different sections/slides of your web page with a Parallax-like scrolling effect.

How to use it:

1. Include the jQuery library and jQuery mousewheel plugin on the web page.

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

2. Create some sections/slides for the plugin.

<section class="slide slide1 js-slide">

Your content goes here

</section>

<section class="slide slide2 js-slide">

Your content goes here

</section>

<section class="slide slide3 js-slide">

Your content goes here

</section>

...

3. The required CSS for the slide styles. Modify them or add any other styles however you like.

.slide {
  background-size: cover;
  color: #333333;
}
.slide.slide1 {
  color: white;
  background-image: linear-gradient(bottom, white 60%, #333333 40%);
  background-image: -o-linear-gradient(bottom, white 60%, #333333 40%);
  background-image: -moz-linear-gradient(bottom, white 60%, #333333 40%);
  background-image: -webkit-linear-gradient(bottom, white 60%, #333333 40%);
  background-image: -ms-linear-gradient(bottom, white 60%, #333333 40%);
}
.slide.slide2 {
  background: url(../img/2.jpg) 100% 100% no-repeat fixed;
}
.slide.slide3 {
  background: url(../img/3.jpg) 50% 0 repeat fixed;
}

5. Add the following Javascipt snippets in your JS file.

$(function(){

var $window = $(window);
var slide = $('.js-slide');
var sectionHeight = $(window).height();
var slideHeight = $(slide).height();


slide.height(sectionHeight);

var scrollingScreen = false;
$(".js-slide").mousewheel(function(event, delta) {
if ( !scrollingScreen ) {
scrollingScreen = true; 
// prevent call
var top = $("body").scrollTop() || 
  $("html").scrollTop(); 
// Chrome places overflow at body, Firefox places whacks at html...
// Finds slide headers above/below the current scroll top
var candidates = $(".js-slide").filter(function() {
if ( delta < 0 )
return $(this).offset().top > top + 1;
else
return $(this).offset().top < top - 1;
});
// one or more slides found? Update top
if ( candidates.length > 0 ) {
if ( delta < 0 )
top = candidates.first().offset().top;
else if ( delta > 0 )
top = candidates.last().offset().top;
}
// Perform animated scroll to the right place
$("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() {
$('.container h2').fadeIn();
// Release call
scrollingScreen = false; 
});
}
return false; 
});​

// Create HTML5 elements for IE ('cause it's bad)
document.createElement("article");
document.createElement("section");


});

---

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