パララックス効果を使ったウェブデザイン

パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール(奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール)させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。

How to recreate Silverback’s parallax effect

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

How to recreate Silverback’s parallax effect

Silverback — guerrilla usability testing

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

Silverback — guerrilla usability testing

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

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

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

We All Hate Quickbooks, Do You?

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

We All Hate Quickbooks, Do You?

Dromaeo

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

Dromaeo

Percentage Backgrounds — Large numbers do interesting things

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

Percentage Backgrounds -- Large numbers do interesting things

A parallax optical illusion with CSS: The Horse in Motion

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

A parallax optical illusion with CSS: The Horse in Motion

Dumago: Be carefree what you wish for

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

Dumago: Be carefree what you wish for

Starry Night by CSS-Tricks

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

Starry Night by CSS-Tricks

JavaScript系

jParallax

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

jParallax

jParallax Demos

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

jParallax Demos

40 JAAR SIRE – U mag het zeggen

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

40 JAAR SIRE - U mag het zeggen

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

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

jQuery Parallax Scrolling - Build your own 1980's video game! : Locomotivation

Parallax Demo

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

Parallax Demo

Parallax Background with Javascript and CSS

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

Parallax Background with Javascript and CSS

JavaScript Example: Fly + Parallax Scrolling Effect

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

JavaScript Example: Fly + Parallax Scrolling Effect

Flash系

Flash Kit

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

Flash Kit

Javier Ferrer Vidal

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

Javier Ferrer Vidal

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

関連記事

3件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です