パララックス効果というのは、視差効果を使って奥行きを出す技法。

デモを作りましたのでご覧ください。 ※　マウスを動かすとぐるぐる動きます。

デモのような物が、簡単に作ることが出来ます。

『Parallax Background Builder』

上記サイトへいくと、背景かコンテンツの1部で作成するかを選択する画面が出てきます。 背景を選択すると、すぐに作成画面に入ります。コンテンツの1部で作成を選択すると下記の図のようにidと縦x横の大きさを記述する画面に遷移します。

使い方

使い方は、画面上部のGet-Startedの部分をクリックすると詳細な説明が書かれています。

作成するにあたって、いくつか画像は用意されていますが、ご自身で作成された画像も使うことができます。

1.　背景色を決めよう

まずは、背景色を決めます。 デフォルトは、白になってますので、色を変更したり背景色をなしにすることも可能です。

2.　動かす画像を決めよう

次に、実際に動かしていく画像を挿入していきます。

'Layers' と書かれた部分の右下をクリックします。

自身で用意した画像を使うときは、'ImageURL'へ記述します。 下記の図にあるように少し画像も用意されていますので、そちらを使用することも可能です。 ※　'Show Images gallery'をクリックすると表示されます。

'OK'をボタンを押下すると画像が挿入されます。

すると、右側に'Layer Visual Properties'が表示され、先程選択した画像が表示されていると思います。 その下に'Image Mode'というのがあります。ここで、画像をPatternとして扱うかImageとして扱うかを選択します。

リアルタイムで変更が反映されますので、ここではそれぞれの動きについての説明は割愛します。

3.　動きを決めよう

背景色、画像が決まればあとは、最終段階の動きを付けるです。

動かしたいレイヤーをクリックすると、

左に'Layer Behavior'が表示されます。ここで動きを決めます。

動きは、2パターンで

• Mouse Move
• Mouse Scroll

両方選択することも出来ます。

こちらもリアルタイムで変更が反映されますので、ここではそれぞれの動きについての説明は割愛しますね。

4.　コードを貼り付けよう

すべて決まったら、あとはコードを貼り付けるだけ！

'Get Embed Code'ボタンをクリックすると

このようにコードが出てきますので、"＜head＞ ＜/head＞" タグのところへ貼り付ければ完成です。