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

パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール（奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール）させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。 How to recreate Silverback’s parallax effect まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、４つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbac

[dirablue]

階層　レイヤー　奥行き

[schrift]

　視差、パララックス。

[diveintounlimit]

2008年の記事。

[sima-box]

パララックスサイト作る際に参考になりそう

[flyeagle]

パララックス効果とは。2008年の記事

[melo1029]

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

[tvsk]

パララックスを使う。Webサイトのショーケース

[mash_kororo]

パララックス効果

[Cherenkov]

github 404のようにマウスカーソルに合わせて背景が動いて立体感や奥行きを感じられる効果を出す

[mellow_punch]

パララックスサンプル

[sorausa1124]

パララックス効果

[futomo]

今日初めてこの言葉知った

[soma1080]

うーん、若干キワ物な感じがする

[hidehish]

見てる:

[kurobuchi]

レイヤーを重ねてスクロールに差をつけるデザイン。「パララックス効果」覚えておく。

[match_1]

CSSで奥行き感のあるデザイン

[jesuisfemme]

奥行きがある

[Naruhodius]

∑(｡･д･｡)b ﾅﾙﾎﾃﾞｨｳｽ!!

[SpeedcoreTokyo]

書き割りスクロール風なデザインのWEBサイトいろいろ

[aeka]

奥行きといえばここがすきだよhttp://boxmedia.hu/

[rochefort]

CSSのbackground-positionのプロパティを%で指定して、各レイヤーのパーセントを変える

[atakuso]

奥行き

[so_ra_to]

奥行き効果

[labocho]

スーファミぽい奥行きを出す スプライト

[boyasan]

そのうちどっかで応用したい

[youshow]

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

[shunk76]

透過pngを使って、視差効果により奥行きを出す

[flakwing]

奥にあるレイヤーはゆっくり、手前にあるレイヤーは速くスクロールさせる事で、奥行きがあるように見せる

[hiro-rock]

奥行きのあるwebデザインなどなど

[fujiwarayuta]

パララックス効果で立体感のあるデザインの例。