2012年10月31日水曜日

パララックス効果を使ったページ作成の第一歩

パララックス効果を使ったページが増えてきて、作ってみたくなったのでサンプルを作った。
http://sample.kyosuke25.com/201210/slide.html

でもこのサンプルはただの第一歩であって「視差」を表現できていないので、このサンプルには「パララックス効果」は使ってない。 

これで十分派手なページになるので、このままでもいいように思うけど。

ちなみに、複数の要素を違ったスピードで動かして「視差」を表現しないと「パララックス効果」とは言えない気がするけど、単にページ内でダイナミックにスクロールするだけでもパララックスって言ってるようなケースが少なからずある気がする。
 自分もそう呼んでるけど、違和感ありありなので最近パララックスって言うのが憚れる。 

で、肝心の技術要素について。
このサンプルでやってることは大きく3つ。

1.縦3画面×横3画面
2.画面をブラウザいっぱいに表示
3.上下左右斜めスクロール

HTMLはこんな感じ。
<div id="container">
  <div id="area1-1" class="screen">
    <img src="bg1-1.jpg" class="bgimage" />
  </div>
  <div id="area1-2" class="screen">
    <img src="bg1-2.jpg" class="bgimage" />
  </div>
  <div id="area1-3" class="screen">
    <img src="bg1-3.jpg" class="bgimage" />
  </div>
  <div id="area2-1" class="screen">
    <img src="bg2-1.jpg" class="bgimage" />
  </div>
  <div id="area2-2" class="screen">
    <img src="bg2-2.jpg" class="bgimage" />
  </div>
  <div id="area2-3" class="screen">
    <img src="bg2-3.jpg" class="bgimage" />
  </div>
  <div id="area3-1" class="screen">
    <img src="bg3-1.jpg" class="bgimage" />
  </div>
  <div id="area3-2" class="screen">
    <img src="bg3-2.jpg" class="bgimage" />
  </div>
  <div id="area3-3" class="screen">
    <img src="bg3-3.jpg" class="bgimage" />
  </div>
</div>

では順番に。

1.
div#container {
  width: 300%;
}
div.screen {
  width: 33.33333333%;
  float: left;
}
つまり、全体として3倍の横幅を取っておいて、1画面の領域には3分の1の幅を指定。
なお、小数点が第何位まで有効なのかは不明。

2.
div.screen .bgimage {
  width: 100%;
}
1で指定した領域いっぱいに画像幅を指定。

3.
http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly
にある「scrollsmoothly.js」っていうスクリプトを使わせていただいた。
作者、天才。

ほな。

【追記】
スクロールのパターンを追加した。
1.横スクロールのみ
http://sample.kyosuke25.com/201210/slide_yoko.html
2.斜めスクロールのみ
http://sample.kyosuke25.com/201210/slide_naname.html

このエントリーをはてなブックマークに追加