いま注目のWeb表現「パララックス」をLiVE for WebLiFE*で試してみる

スライドを動かすことで人物の服の色が変わる！

この作例は、マウスのスクロールに合わせて、正面の人物の服の色が変化していくというもの。スライドが切り替わるごとに服の色が変化する。この作例のポイントはすべてのスライドの背景を固定することと、複数のスライドを利用することだ。個々のスライドの設定は「背景画像（下）」の設定のみ。使用する画像の透過場所、配置するスライドなどによってパララックス表現の幅が広がるのではないかと思う。

作例2のレイヤー構造は、最初のレイヤー画像を固定。後は、それぞれスライドの三層部分に画像を配置する。レイヤー構造は次の通りになる。

用意する画像は、四枚。最初のレイヤーに使う背景画像。服以外の余分な部分を切り取り、カラーバランスで緑、オレンジ、青と色違いに加工した三枚の透過画像を用意した。

LiVEの設定は、まずスライドを四枚作成する。「ページ背景（下）」の設定を行う。最初のスライド以外、すべての「背景画像（上）」に画像を配置する。ポイントは、背景アニメーションの設定をOFFにすること。ここにチェックが入ると着せ替えがピッタリ決まらなくなる。完成したスライドは以下のように動いていく。

設定の確認

スライドの設定を見てみよう。主な設定箇所は五カ所。一つずつ見て行こう。

この五カ所の背景画像を設定するだけで作業は完了だ。ポイントは、すべての背景を固定にチェックを入れること。実際に動くサンプルは、以下のWebサイトで確認できる。