![Loading...](https://cdn-ak-scissors.b.st-hatena.com/image/square/0195073d545d6b7613af5034cdabd5302a6e97cc/height=288;version=1;width=512/http%3A%2F%2Fwebdesignmatome.com%2Fwp-content%2Fuploads%2F2011%2F12%2FA151.jpg)
パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール(奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール)させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。 How to recreate Silverback’s parallax effect まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、4つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbac
基本、Web系の記事メモです。内容は他力本願ですいません。綺麗にカテゴリとかまとめる気はないです。アーカイブから見た方が見やすいかも〜w パララックス効果を用いたコンテンツを作りたい! パララックス効果を用いたページが流行って(?)ますよね。 作ってみたいと思ったので色々探ったページをメモ 【まずはデザイン(見た目)の参考】 Nike Better World http://www.nikebetterworld.jp/ ACTIVATE http://activatedrinks.com/#/activate Manufacture d’Essai http://www.manufacturedessai.it/it/ iutopi - Creative Land / Branding, Graphic & Web Design | | | | | | | Mauro Macch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く