Paralaxe horizontal na rolagem – jQuery

3 camadas, diferentes posições de fundo e velocidade conforme você rola a janela. Também muda a imagem dependendo se você rolar para cima ou para baixo.

HTML

<div class="c">        
<div id="fishyContainer">
<div class="fishy nflip fishya"></div>
<div class="fishy nflip fishyb"></div>
<div class="fishy fishyc"></div>
<div class="fishy flip fishyaFlip"></div>
<div class="fishy flip fishybFlip"></div>
</div>
</div>

CSS

.c {
height
: 1000px;
overflow
-x: hidden;
width
: 700px;
margin
: 50px auto;
overflow
: hidden;
position
: relative;
background
: #000a22;
-webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 12px rgba(0,0,0,0.4);
box
-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}
.flip {
display
: none;
}
#fishyContainer {
top
: 230px; position: absolute;
}
.fishy {
position
: absolute;
background
-repeat: repeat-x;
background
-position: left top;
width
: 5000px; height: 370px;
}
.fishy.fishya {
background
: url('fisha.png');
}
.fishy.fishyb {
background
: url('fishb.png'); opacity: .4;
}
.fishy.fishyc {
background
: url('fish2c.png');
}
/* flipped fishy */
.fishy.fishyaFlip {
background
: url('fishaflip.png');
}
.fishy.fishybFlip {
background
: url('fish2bFlip.png'); opacity: .4;
}

jQuery

$(document).ready(function() {
var speed = 40;
var lastScrollTop = 0;
// higher variation = faster acceleration
function positon(variation) {
newPosition
= (scrollPercent * (speed * variation)) - (speed * variation);
return newPosition + "%";
}
$
(window).scroll(function(e) {
var scrollNum = $(window).scrollTop();
scrollPercent
= $(window).scrollTop() / ($(document).height() - $(window).height());

if (scrollNum > lastScrollTop) {
// downscroll
$
(".nflip").show(); $(".flip").hide();
$
(".fishya").css("backgroundPosition", positon(-1.6) + ' 0');
$
(".fishyb").css("backgroundPosition", positon(-0.8) + ' 10px');
$
(".fishyc").css("backgroundPosition", positon(-0.3) + ' 500px');
} else {
//upscroll
$
(".nflip").hide(); $(".flip").show();
$
(".fishyaFlip").css("backgroundPosition", positon(-1.6) + ' 0');
$
(".fishybFlip").css("backgroundPosition", positon(-0.8) + ' 10px');
$
(".fishyc").css("backgroundPosition", positon(-0.3) + ' 500px');
}
lastScrollTop
= scrollNum;
});
});​

DEMO
http://jsfiddle.net/leethelobster/N7SS3/embedded/result/