スクロールで見せる大胆なWeb表現「パララックス」とは？

見る者を"ハッ"と引きつける力を持つエフェクト「パララックス」は、メーカーの特設サイトやサッカー選手の公式サイト、クリエイターたちのWebサイトなどで最近よく取り上げられている、いずれも言葉や映像での表現とはまた異なるダイナミックなメッセージがWebから飛び出てくる新しい表現手法だ。

パララックスを使うWebサイトは、マウスをスクロールさせることで、写真や背景が"連動"して大胆に動く。配置されている複数の画像、オブジェクトがマウスのスクロールに合わせて、それぞれ別々のスピードで動き、ページに奥行きを与えてくれるのだ。パララックス効果がどういったものなのかは、実際に利用されているWebサイトを見てみるとわかるだろう。

jQueryのプラグイン「ScrollDeck.js」のWebサイトに設置してあるサンプル。シンプルであるが、バスケットボール、シューズ、カップと大きなオブジェクトが配置してあり、基本的なパララックスの動きがわかりやすい。特にシューズの左足用と右足用が交差していく部分に端的に表れている(図1～図2)。

図1「ScrollDeck.js」にあるサンプル

図2 シューズの重なり部分に注目

ドイツのデザイン会社「OK Studios」のWebサイト。折り鶴と文字が三層に分かれていている。遠近法で表現される近いところにある折り鶴と、遠目にある小さい折り紙では、スクロールの長さが異なる。このスクロールの長さの違いで、立体的な動きを実現している(図3～図4)。

図3「OK Studios」のWebサイト

近い折り鶴と遠い折り鶴のスクロールによる移動の長さが異なる

「パララックス効果」は、WebページにCSSのレイヤー設定で貼り付けた複数の画像をJavaScriptなどのプログラミング言語でマウススクロールに合わせてレイヤー毎に動くスピードを調整している。手前の画像は速く、奥の画像はゆっくり動くように調整することで実現している。

通常jQueryなどのJavaScriptのプラグインを活用することが一般的だが、この場合、JavaScriptの知識が必要になり一般ユーザーには、ハードルが高い。そこで、前回に引き続き、プログラミングの知識が全く無くても簡単にパララックスを利用したWebサイトを作成できる「LiVE for WebLiFE*」を使って、その作成方法を見てみよう。

「LiVE for WebLiFE*」で作成するパララックス

LiVEでは、レイヤーを六つ利用することが可能(図5)。レイヤー構造は、大きく分けると「ページ背景」と「スライド背景」と「コンテンツ背景」、「ウィジェット」の区分になる。

図5 LiVEで設定できる各レイヤー

ページ背景：「ページ背景（下）」と「ページ背景（上）」

最も深い層にあたる「ページ背景」は、ページ全体の背景になる。

スライド背景画像：「背景画像（下）」と「背景画像（上）」

「スライド背景画像」。通常のパララックスを利用する場合は、この部分の設定を利用するのが一般的だ。

コンテンツ背景：「スライド背景」

「スライド背景」になる。これは、スライドのテキスト入力部分の背景となる部分になる。

ウィジェット:「バルーン」

「バルーン」などのウィジェット使うことで一番上のレイヤーとして利用することができる。

LiVEでパララックス効果を利用するには、「スライドの背景」の背景画像の設定ダイアログで、「スライド背景画像（上）」と「スライド背景画像（下）」を設定する（図6）。上画像と下画像ではスクロールのスピードが異なるので、ここで画像を指定するだけで、もっとも簡単なパララックスを表現することができる。

図6「スライド背景画像（上）」と「スライド背景画像（下）」の設定

このようにスライド背景の上下の画像を設定することで二つの画像の動きを変化させる。単純ではあるが、パララックスを表現できる。次ページからは簡単ではあるが実際に筆者が作成した作例を紹介してみよう。