![http://www.designwalker.com/2010/06/redesign.html](https://cdn-ak-scissors.b.st-hatena.com/image/square/b054a6842b1003b09c19712709f3bc7ae5dbca71/height=288;version=1;width=512/https%3A%2F%2Fwww.designwalker.com%2Fwp-content%2Fuploads%2F2017%2F12%2F01-24.png)
パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール(奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール)させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。 How to recreate Silverback’s parallax effect まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、4つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く