パララックス効果(視差効果)を使ったWebサイト

スクロールのきっかけは？

さて、このサイトではパララックス効果(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座標の値を変化させてあげるというのが、パララックス効果のスクロールをして奥行きを出す基本のようである。

CSSのbackground-attachment: fixed;

これと平行して頭に入れておきたいのがCSSのbackground-attachment: fixed;の指定である。

background-attachment: fixed;とは、どんな意味の指定なのかはググってもらうと分かると思いますが、ウィンドウをスクロールしても背景画像を固定しておく指定である。パララックス効果のサイトでは、各々のボックス要素をfixedで固定して、上記のjQueryのscrollのイベントに反応させて、jQueryでCSSのbackground-positionのy座標を変化させ、重ね合わせた前面と背面の移動量を調整する事によって、靴が重なりあったりするような面白い動きを可能にしてるみたいです。前面の画像を透過pngで作るのがポイントです。

パララックス効果のサイトを作るには、スクロールするぐらいのコンテンツ量が無いと、試せないので以下はサイトを埋める為の参考です。とりあえず、HTML5でコーディングしてみて、どのぐらいでSEO効果があるのかなあ？という意味も含めて、とり急ぎ、文章だけのサイトで見づらいのをお許しください。この続きを書くために自分自身に課題を与えて、少しづつ修正していきます。

【2011年11月28日加筆。by Fumio Tanaka】

参考：パララックス効果(視差効果/Parallax Effect) サイト・リンク集

筆者がスゴイと思ったサイト

• Nike Better World

  一番最初にスゴイと思ったNike Better Worldのパララックス効果のサイト

• Activate Drinks

  2011年11月にみつけたActivate Drinksのサイト。フワフワ感がたまらないのと、コーポレートサイトとして成立している所がスゴイ！

• Moods Of Norway

  横型のパララックス効果。車の車輪の動きとかが面白い。これもマウスのwheel量で動かしている。 1014x786の絵を10枚横にfloatさせて固定。それでbackground-position:のx座標かleft:の値を変化させているみたい。

• ヤクルト/シンガポールのサイト

  これまた 、横型のパララックス効果。WordPressで作られているみたいだけど、ほんとアニメーションみたいでスゴイ！！！これもマウスのwheel量でleft:の値を変化させているみたい。

• Nizo

  iPhoneにいろんなモノが整列していくのが面白い！！！画面の真ん中に来た時にiPhoneの横の座標の値になるように工夫しているのだろうか？