パララックス効果(視差効果)とは？
2011年11月現在、パララックス効果(Parallax Effect)を使ったWebサイトが流行っているらしい。始まりはNike Better Worldのサイトの靴が重なりあっていく動きを見たのが最初だった。﹃これは面白い！！！﹄という事になり、いろいろと検索するようになった。
スクロールのきっかけは？
さて、このサイトではパララックス効果(Parallax Effect)を使ったサイトを作るには、どのようにしていくか？というのをHTML5コーデイングしていきながら、勉強していく。まず、jQueryで以下のようにコーディングしてみる。jQueryでのコーディング
<script type="text/javascript">
$( function(){
$(window).bind( "scroll", scroll_message);
} );
function scroll_message( event){
console.log( "スクロールしたでしょ！！！");
var win_scrollTop = $(window).scrollTop();
var para2_top = $( "#jQuery").offset().top;
var sc = para2_top - win_scrollTop;
console.log( win_scrollTop, para2_top, sc);
}
<script>
これでI.E.以外のブラウザで、このサイトをスクロールしてみると、要素の検証→コンソールに﹃スクロールしたでしょ！！！﹄と出力されるハズです。なにはともかく、このjQueryの部分がパララックス効果のサイトのを動かす時の最初のイベントなのである。
win_sclollTopにはスクロールした値。para2_topには﹃jQueryでのコーディング﹄というh2要素までの高さ。scには、その2つを引き算した値。スクロールしていくと下記のように値が変わるハズです。
0 325 325
90 325 235
160 325 165
232 325 93
325 3525 0
そして﹃jQueryでのコーディング﹄の部分がページの一番上に来た時、sc=0になるのが分かる。このscの値を変化を利用して、backgroundPositionのy座標の値を変化させてあげるというのが、パララックス効果のスクロールをして奥行きを出す基本のようである。