パララックス コンポーネント

パララックス コンポーネントを使用すると、画像を重ねて奥行きの錯覚を生み出すことができます。モバイル デバイスでページを上下にスクロールすると、前景画像と背景画像が異なる速さで動きます。

プロジェクトにパララックス コンポーネントを追加する

1. [コンポーネント] パネル、[操作] フォルダの順に開きます。
2. パララックス コンポーネント をステージにドラッグします。
3. コンポーネントをダブルクリックして、コンポーネント編集モードを開始します。
4. 画像ファイルをファイル システムからステージまたは [レイヤ] パネルにドラッグするか（Windows または Mac のみ）、[レイヤ] パネルの下部にある「画像を追加」ボタン をクリックして、レイヤを追加します。レイヤとして追加できるのは画像のみです。
5. [開始] タブと [終了] タブを使用して、アニメーションの開始時と終了時に表示するレイヤをそれぞれ配置します。レイヤは任意の場所にドラッグできます。または、[プロパティ] パネル内の [開始] と [終了] 位置フィールドも使用できます。[開始] タブの右にカーソルを合わせて ボタンをクリックし、中間状態を追加することもできます。
6. 必要に応じて、その他の設定オプションを設定します
7. コンポーネントの設定（コンポーネントは設定の途中でプレビューできます）が完了したら、[保存] をクリックして、通常の Google Web Designer インターフェースに戻ります。

パララックスの概要

設定項目

コンポーネントを設定するには、ステージでダブルクリックするか、[プロパティ] パネルでコンポーネントを選択して設定 をクリックします。

レイヤを追加する

レイヤを追加する方法には以下の 2 つがあります。

• ファイルをファイル システムから（Mac または Windows のみ）、またはライブラリから、ステージまたは [レイヤ] パネルにドラッグします。
• [レイヤ] パネルの下部にある「画像を追加」ボタン をクリックします。

パララックス コンポーネントのレイヤは画像である必要があります。

レイヤを移動する

1. 移動するレイヤを選択します。
2. [開始]、[中央]、または [終了] タブを選択します。（まだの場合は、中間状態を追加できます）。
3. 次のいずれかの方法でレイヤを配置します。
   • レイヤを新しい位置にドラッグします。
   • 矢印キーを使用して、レイヤを 1 ピクセルずつ移動します。Shift キーを押しながら矢印キーを押すと、その矢印の方向にレイヤを 10 ピクセル移動できます。
   • [レイヤのプロパティ] タブで [開始]、[中央]、または [終了] の位置プロパティを設定します。編集できるのは、現在のタブに該当するプロパティのみです。「開始位置をコピー」、「中央位置をコピー」、または「終了位置をコピー」 ボタン を使用すると、他の位置をコピーできます。

アニメーションの別のタイミングでレイヤの位置を調整するには、別のタブに切り替えます。

画像を入れ替える

1. ステージ上で入れ替えたい画像を右クリックし、ポップアップ メニューから [画像を入れ替える] を選択します。
2. ライブラリから画像を選択するか、「ファイルのインポート」ボタン をクリックして、パソコン内の画像ファイルを選択します。

新しい画像が元の画像と入れ替わります。入れ替える前の元の画像サイズを以前に変更していた場合は、新しい画像にも変更されたサイズが適用されます。サイズを変更していない場合、新しい画像はそのままのサイズとなります。

レイヤを並べ替える

[レイヤ] パネルで、リスト内のレイヤをドラッグして位置を変更します。

このレイヤの順序によってレイヤの表示位置が決まります。リストで上位にあるレイヤが、下位のレイヤの前に表示されます。

レイヤを削除する

1. 削除するレイヤを選択します。
2. [レイヤ] パネルの下部にある削除ボタン をクリックするか、Delete キーを押します。

レイヤのサイズを変更する

1. サイズを変更するレイヤを選択します。
2. [レイヤのプロパティ] パネルで、レイヤの幅と高さをピクセル単位で設定します。
   • 「アスペクト比を固定」ボタン をクリックし、幅と高さのアスペクト比を固定するかどうかを切り替えます。

レイヤは、アニメーションの再生期間全体にわたって指定されたサイズに調整されます。

レイヤの不透明度を変更する

1. 変更するレイヤを選択します。
2. [レイヤのプロパティ] パネルで、不透明度の開始値と終了値を 0～1 の値（0 は透明、1 は不透明）に設定します。

レイヤのアニメーションのイージングを変更する

1. 変更するレイヤを選択します。
2. [レイヤのプロパティ] パネルで、[イージング] プルダウンからイージングのタイプを選択します。

カスタム イージングは使用できません。

中間状態を追加する

パララックス コンポーネントのアニメーションをさらに細かく調整するには、中間状態を追加してそのタイミングでレイヤのプロパティを変更します。

1. [開始] タブの右にカーソルを合わせて、 ボタンをクリックします。[中央] タブが表示されます。
2. デフォルトでは、中間状態はアニメーションの開始から終了の間にあります。アニメーションのタイミングは調整できます。
3. この時点で、[中央] タブに切り替えて、レイヤのプロパティを設定します。

中間状態を削除するには、[中央] タブの右にカーソルを合わせて X をクリックします。

アニメーションのタイミングを変更する

パララックス コンポーネントのアニメーションのタイミングは、ページまで、またはページからのスクロール距離によって決まります。デフォルトでは、アニメーションは、コンポーネントの上端がページに表示されると始まり（0%）、下端がページの上部から見えなくなると終了します（100%）。中間状態を追加すると、アニメーションの動作タイミングを調整できます。アニメーションのタイミングを調整する方法には、以下の 2 つがあります。

• [アニメーションのタイミング] パネルで、[開始]、[中央]、[終了] のボックスまたはスライダーを、任意の割合までドラッグします。
• [アニメーションのタイミング] パネルのフィールドに、開始、中央、終了の割合を入力します。

レイヤの表示と非表示を切り替える

[レイヤ] パネルで、レイヤのサムネイルの横にあるチェックボックス（「レイヤをすべて非表示」ボタン の下）をオンにします。

「レイヤをすべて非表示」ボタン をクリックすると、すべてのレイヤを表示または非表示にできます。

レイヤを非表示にすると、もう 1 つのレイヤ上の作業が簡単になるうえ、設定プレビューでもレイヤを非表示のままにできます。ただし、ブラウザでのプレビューや公開済みのクリエイティブでは非表示になりません。

ゴーストの表示と非表示を切り替える

1. レイヤを選択します。
2. [レイヤのプロパティ] パネルの [詳細プロパティ] で、[ゴースト表示] の切り替えをクリックします。

ゴーストとは、現在編集していない位置に表示される半透明のレイヤです。そのため、開始位置、中央位置、終了位置の比較を視覚的に行うことができます。ゴーストは参照専用であり、プレビューや公開済みのファイルでは表示されません。

プロパティ

コンポーネント プロパティ

コンポーネント プロパティは [プロパティ] パネルに表示されます（コンポーネント編集モードを終了する必要があります）。

プロパティ	説明
名前	パララックス コンポーネントの名前。
スクロール率	閲覧者がどこまでスクロールしたかを示す 0～1 の数値。Google Web Designer のステージで表示する場合にのみ使用されます。デフォルトは 0.5 です。

レイヤのプロパティ

コンポーネント編集モードでは、レイヤのプロパティを表示および編集することができます。

プロパティ	説明
名前	レイヤの名前（編集不可）。
開始	コンポーネントが最初にビューに入ってくるとき（つまり、コンポーネントの上端がビューポートの下端にあるとき）のコンポーネントの左側と上部からのレイヤの距離。ピクセル単位またはパーセンテージで計測されます。[開始] タブを選択すると、編集できます。
中央	アニメーションの中間状態にあるコンポーネントの左側と上部からのレイヤの距離。ピクセル単位またはパーセンテージで計測されます。[中央] タブを選択すると、編集できます。
終了	コンポーネントがビューから出るとき（つまり、コンポーネントの下端がビューポートの上端にあるとき）のコンポーネントの左側と上部からのレイヤの距離。ピクセル単位またはパーセンテージで計測されます。[終了] タブを選択すると、編集できます。
サイズ	レイヤの幅と高さ。レイヤはアニメーションの再生時間全体にわたって、このサイズに調整されます。
不透明度	レイヤの不透明度の開始値と終了値。0（透明）～1（不透明）の数値で示します。
イージング	レイヤのアニメーションのイージングのタイプ。カスタム イージングは使用できません。
ゴーストの表示	有効にすると、アクティブでない位置（現在編集していない位置）のレイヤが半透明で表示されます。

イベント

イベントを使用して広告内の他の操作をトリガーできます。パララックス コンポーネントで送信されるイベントは次のとおりです。

イベント	説明
パララックスの読み込み完了	コンポーネントの表示の準備ができたときに送信されます。

プレビュー

設定中