スクリプト初心者でも簡単にパララックスのエフェクトを作成できるオンラインサービス -Parallax Background Builder

複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を生み出すパララックスを簡単に、そして確認しながら作成できるオンラインサービスを紹介します。
JavaScriptやCSSの初心者でも簡単にできると思います。

サイトのキャプチャ

Parallax Background Builder

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」をクリックします。

サイトのキャプチャ

コードの表示

あとは、使用したいページにコードをコピペして利用するだけで、パララックスのエフェクトが実装できます。

詳しい使い方は、下記ページをご覧ください。

top of page

©2017 coliss