2012年頃から多くのWebサイトで採用され始め、当初はその流行の波はすぐに過ぎ去ると思われていましたが、今でもパララックスの手法を扱ったサイトデザインが新しく生み出されもし、色々なサイトで見かけられます。様々なスクロールエフェクトと掛け合わせて利用することで、更なる未知の可能性を秘めているのではないでしょうか。
はじめの一歩ということで、その「パララックスサイト」について基本的なことをメモしておくとこにします。
「パララックス」とは？
パララックス(parallax)は直訳すると“視差”という意味。
視差（しさ）は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差。パララックス (英:parallax)ともいう。
wikipediaより抜粋
スクロール動作に応じて、複数のレイヤーにある視覚要素を異なるスピードでスクロール動作させることで、視差を表現、立体感・奥行きを演出する手法になります。
パララックスサイトを作成する際の注意点
パララックス効果を有効的にサイトに取り入れようとすると、ある程度縦に長いページになることが前提となってきますが、必要以上に多数の情報(画像)などを1ページ内に表示させてしまうと1ページ自体のデータサイズが必然的に大きくなってきてしまいまう可能性があります。また、根本的にサイト自体が「何を主張したいのか？」が曖昧になってきてしまう恐れが大いにあります。ユーザーはサイト構成の面白さに惹きつけられる反面、乱雑になり過ぎてしまうとストレスを感じてしまうことが考えられますので注意が必要で。そのような特性の中で、ページをスクロールしながら様々な演出を通して、何かしらの流れやストーリー性を感じることができるかが、このパララックス効果を採用してWebサイトを作成するキーになってくるかもしれません。
パララックスを導入しているサイトをピックアップ
今回は基本的なことのみになります。
まずは、色々なパララックスサイトを実際に見てどのような視差表現があるのかを確認し操作してみるといいかもしれません。