jQueryのアニメーションとCSSでパララックスページを作る

jQueryのanimate関数で要素に動きをつけ、CSSで背景を固定し、なんちゃってパララックスなページを作ってみました。
主なコードは以下から。

サンプルページ

html

	<div id="main">
		<section id="section1" class="content first">
			<p class="text">↓スクロールしてください</p>
		</section>
		<section id="section2" class="content second">
			<p class="box1">box1</p>
			<p class="box2">box2</p>
		</section>
		<section id="section3" class="content third">
			<p class="box3">box3</p>
			<p class="box4">box4</p>
		</section>
	<!-- / #main --></div>

CSS

各sectionに背景画像を設定します。
background-attachment:fixed; で表示位置を固定し、パララックス風に見せます。

.first {
	background:#FFCCCC url(images/01.jpg) 50% 0 no-repeat;
	background-attachment:fixed;
}
.second {
	background:#FFCCCC url(images/02.jpg) 50% 0 no-repeat;
	background-attachment:fixed;
}
.third {
	background:#d2f6f8 url(images/03.jpg) 50% 0 no-repeat;
	background-attachment:fixed;
}

jQuery

スクロールされた値によって、animate関数で動きや透明度の変化が起こるようにしています。
ナビゲーションのアンカーリンクを滑らかに動かすのは、smoothScroll.jsを利用させていただいています。

<script src="../js/smoothScroll.js"></script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(function() {
	$(window).scroll(function () {
		var top = $(this).scrollTop();
		if(top > 600) {
			$(".box1").animate({right: '200px'},'2000');
		}
		if(top > 700) {
			$(".box2").animate({right: '400px'},'3000');
		}
		if(top > 1200) {
			$(".box3").animate({opacity: '1'},'5000');
		}
		if(top > 1400) {
			$(".box4").animate({opacity: '1' , width: '200px'},'5000');
		}
	});
});
</script>

サンプルページ