I'm attempting to achieve a similar effect as seen here: (if it doesn't work in Chrome, try using IE).
This is the progress I've made so far: http://jsfiddle.net/yuvalsab/op9sg2L2/
HTML
<div class="transition_wrapper">
<div class="transition">1</div>
<div class="transition">2</div>
...
</div>
...
<div class="pagewrap">
<div class="some_text_1">Lorem ipsum dolor sit amet.</div>
<div class="some_text_2">Lorem ipsum dolor sit amet.</div>
...
</div>
CSS
div[class^="some_text"] {
padding:50px 0;
border-bottom:1px solid;
}
div.transition_wrapper {
width:100%;
position: fixed;
left:100%;
background:red;
}
.transition {
background: red;
position: absolute;
width:100%;
}
jQuery
function animate(element) {
var lastScrollTop = 0;
...
});
jQuery(document).ready(function(){
jQuery('.transition_wrapper .transition').each(function() {
var element = jQuery(this);
...
});