有名パララックスサイト用ライブラリskrollr.jsを使ってみました。
IE7にも対応しており、（transformプロパティは未対応）実用的です。
skrollr.js の使い方
CSSを読み込む
<link href="src/skrollr.css" rel="stylesheet" type="text/css" />
JSを読み込む（下部）
<script type="text/javascript" src="dist/skrollr.min.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="dist/skrollr.ie.min.js"></script> <![endif]--> <script type="text/javascript"> skrollr.init(); </script>
スクロールの値ごとのスタイルを設定する
<div id="content1" data-0="top:0%;opacity:1;" data-3000="top:100%;opacity:0.3;" > <!-- / .content1 --></div> <div id="content2" data-3000="opacity:1;" data-6000="opacity:0;"> <!-- / .content2 --></div> <div id="content3" data-6000="top:0%" data-9000="top:100%"> <!-- / .content3 --></div> <div id="content4" data-6000="background-position:0px 0px;" data-12500="background-position:0px -500px;"> <!-- / #content4 .content4 --></div> <p id="leftout" data-0="left:50%;" data-3000="left:-100%;">Left Out</p> <div id="transform" data-1000="top:100%;transform:scale(0) rotate(0deg);opacity:1;" data-3000="top:50%;transform:scale(4) rotate(360deg);" data-6000="opacity:0;"> <p>Transform</p> <!-- / #transform --></div> <div class="box" data-9000="top:10%;left:30%;" data-11000="top:-50%"> <p>テキストテキストテキストテキストテキストテキスト </p> <!-- / .box --></div> <div class="easing"> <p data-6500="left:50%;top[cubic]:100%;" data-9000="top:0%;">cubic</p> <p data-6500="left:30%;bottom[quadratic]:100%;" data-9000="bottom:0%;">quadratic</p> <p data-6500="left:70%;bottom[swing]:100%;" data-9000="bottom:0%;">swing</p> <!-- / .easing --></div> <p class="end" data-10000="opacity:0;left:50%;top:50%;" data-11000="opacity:1">end</p>
data-6000=”XXXXX” この部分でスクロールした値によってスタイルを変化させています。
