スクリプト初心者でも簡単にパララックスのエフェクトを作成できるオンラインサービス -Parallax Background Builder
Post on:2012年8月28日
sponsors
複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を生み出すパララックスを簡単に、そして確認しながら作成できるオンラインサービスを紹介します。
JavaScriptやCSSの初心者でも簡単にできると思います。
Parallax Background Builderの使い方をざっくりと説明します。
Step 1: 適用範囲の選択
まずは、パララックスの適用範囲を選択します。
左がページ全体、右がdiv要素のみ、です。カーソルを動かすとパララックスの動作が分かります。
適用範囲を選択
ここでは、左のページ全体をクリックして選択します。
Step 2: 背景の設定
右上のパネルから背景カラーを設定します。
背景を空色に設定
Step 3: レイヤーの設定
ここからがパララックスの本番です。
パララックスでずらして動かすレイヤーを設定します。右下の新規レイヤーボタンをクリックします。
レイヤーパレット
レイヤーの選択パネルが表示されます。
レイヤーの選択パネル
レイヤーパネルでは用意された画像やオンラインの画像を利用できます。
ここでは、用意された2種類の波と太陽の画像を選択しました。
選択するとレイヤーパレットに反映されます
各レイヤーの配置を設定しましょう。
右上の「Layer Visual Properties」パネルで、波なので、ページの下部に固定し（Snap to Bottom）、水平方向にリピートさせます（Repeat on the X-axis）。
位置を調整する場合は、Offsetを設定します。
レイヤーのビジュアルプロパティ
また、各レイヤーの目玉アイコンで表示・非表示が設定できます。Photoshopと同じですね。
太陽は非表示、波だけを表示
Step 3: パララックスの設定
左の「Layer Behavior」で、各レイヤーのパララックスの設定を行います。
レイヤーのビヘイビア
「Mouse Move」はマウスに、「Mouse Scroll」はスクロールに、それぞれ反応します。ここでは「Mouse Move」をチェックします。
「Mouse Move」をチェック
この「Layer Behavior」では、各レイヤーの設定を行います。右のレイヤーパネルでレイヤーを指定し、動作を設定してください。
各レイヤーで大きくずらして動かしたい時には、「Speed」の値を調整します。
※各レイヤーの設定を同じにすると、動きがつまらなくなります。
Step 4: パララックスの確認
パララックスの設定が完了したら、左右のパネルを閉じて、動作確認をします。
カーソルを動かすと二つの波が異なるタイミングで動作します
Step 5: 書き出し
コードの書き出しは、「Get Embed Code」をクリックします。
コードの表示
あとは、使用したいページにコードをコピペして利用するだけで、パララックスのエフェクトが実装できます。
詳しい使い方は、下記ページをご覧ください。
sponsors
