Nice One Page Scrolling Effect with jQuery StackingSlides Plugin

StackingSlides is a super simple jQuery plugin for creating a nice one page scrolling effect that features all the slides will stack on top of each other, a little similar to the parallax background effect.

Basic Usage:

1. Reference to the latest version of jQuery javascript library from google CDN.

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

2. Create slides on your web page.

<div id="one" class="slide">
<div class="content vcenter">
Slide 1
</div>
</div>

<div id="two" class="slide">
<div class="content vcenter"">
Slide 2
</div>
</div>

<div id="three" class="slide">
<div class="content vcenter"">
Slide 3
</div>
</div>

3. The javascript to enable the effect.

<script type="text/javascript">
$(function() {
$('.slide').each(function(){
if ($(this).index() > 0){
$(this).css({"position":"absolute", "top":$(this).index() * 100 + "vh"});
}
});

$('.vcenter').each(function(){
$(this).css({"margin-top":(($(this).parent().height() - $(this).height())/2)});
});

$(window).scroll(function() {
var window_pos = window.pageYOffset;
$('.slide').each(function(){

//Set the fixed position on slides when we scroll past them.
if ($(this).index() > 0){
$(this).css({"position":"absolute", "top":$(this).index() * 100 + "vh"});
if(window_pos > $(this).offset().top) {
   $(this).css({"position":"fixed", "top":"0"});
}
}
});
});
});
</script>

4. Style the web page and slides via CSS.

.slide{
...
}
#one{
...
}
#two{
...
}
#three{
...
}
...

---

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