DEMO

画像を手前は早く、奥は遅く移動

デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。

画像を手前は早く、奥は遅く移動

html + css

画像は当然ですが2枚以上用意しましょう。
ここでは3枚画像の画像を使用します。
なのでdivを3つ用意し、それぞれに背景画像を指定します。

html
<div id="bg03">
<div id="bg02">
<div id="bg01">
<!-- /#bg01 --></div>
<!-- /#bg02 --></div>
<!-- /#bg03 --></div>
css
#bg01 {
  background: url(bg1.png);
  height: 3000px;
}
#bg02 {
  background: url(bg2.png);
}
#bg03 {
  background: url(bg3.png);
}

画面以上にコンテンツがないとスクロールバーが表示されませんので、仮にheightを設定しておきました。

jQuery

「$(window).scroll」がスクロールしたときに実行されるイベントなので、この中に処理を記述します。

javascript
$(function() {
$(window).scroll(function(){
var y = $(this).scrollTop();
$('#bg01').css('background-position', '0 ' + parseInt( -y / 5 ) + 'px');
$('#bg02').css('background-position', '0 ' + parseInt( -y / 50 ) + 'px');
$('#bg03').css('background-position', '0 ' + parseInt( -y / 200 ) + 'px');
});
});

「scrollTop」でスクロールの位置を取得できますので、この値をそれぞれの「background-position」に入れます。
値をそのまま入れるだけだと、全て同じ速度で移動しますので、それぞれ別の値で割ったりすれば良いんですね。