DesignWalker

パララックス効果って、あまり聞き慣れない言葉ですが…。

初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。

いくつかのレイヤーを、それぞれ違った速度でスクロール（奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール）させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。

今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。

How to recreate Silverback’s parallax effect

まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、４つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbackground-positionのプロパティを%で指定して、各レイヤーのパーセントを変えるのがミソ。

Silverback — guerrilla usability testing

↑のサイトで説明されていたサイトがこちら。とっても良くできていますね。

Креативная разработка

こちらは、ロシアのサイトです。中央の男性と、右上の木、背景のバランスがいい感じです。

We All Hate Quickbooks, Do You?

ブラウザの横幅を変更すると、ページ下部の炎の部分がスクロールします。

Dromaeo

ヘッダーのかわいい恐竜がスクロール。

Percentage Backgrounds — Large numbers do interesting things

とっても楽しいスクロールですね。ブラウザの横幅を変えて遊んでみてください。

A parallax optical illusion with CSS: The Horse in Motion

これはすごい！馬が走ってます。

Dumago: Be carefree what you wish for

シンプルですが、とってもきれいな視差効果が出ています。

Starry Night by CSS-Tricks

ブラウザの縦や横にリサイズしてみると奥行きを感じます。

JavaScript系

jParallax

マウスの動きに反応してレイヤー画像をスクロールしてくれるスクリプトです。サンプルもよくできています。

jParallax Demos

jParallaxを使ったデモです。とってもいい感じですね。

40 JAAR SIRE – U mag het zeggen

オランダのサイトです。こちらもスクリプトを使って、マウスが動くと、それに合わせて背景が動きます。

jQuery Parallax Scrolling – Build your own 1980′s video game! : Locomotivation

jQueryを使って、自動でスクロールさせる方法が紹介されています。

Parallax Demo

こちらは、最初にご紹介したSilverbackのデザインに、prototypeを使ったアニメーションのサンプルです。ページ中央のShrink!のリンクをクリックするとスクロールします。

Parallax Background with Javascript and CSS

縦のスクロールに対応しているスクリプトです。背景のチェック画像と、雲、ページ枠のスクロールに視差効果が出ていて、不思議な感じです。

JavaScript Example: Fly + Parallax Scrolling Effect

こちらもスクリプトを使った星空のサンプルです。

Flash系

Flash Kit

Flashを使ったサンプルです。Flashファイルもダウンロードできるので、参考になります。

Javier Ferrer Vidal

先ほどのFlashのサンプルをうまく利用すれば、こちらのサイトのような視差効果が作れるのではないでしょうか。

みなさんもパララックス効果をうまく利用してサイトをデザインしてみると、他のサイトと差別化が図れるのではないでしょうか。