-
Google Web Designerのデベロッパー
ナイヴェッシュです
-
パララックスコンポーネントを使った
アニメーションの作成方法を説明します
-
ページを上下にスクロールしたときに
-
前面と背後の画像が違う速さで動くと
奥行きを感じられます
-
このコンポーネントを
広告掲載サイトで使用すると
-
ページでのスクロールに応じて
広告画像に動きをつけられます
-
アニメーションの
他の例を見てみましょう
-
[ファイル]>[テンプレートから新規作成]で
-
[Parallax for Display & Video 360]を
選択します
-
ブラウザに表示されるときと同様の
サンプルが表示されます
-
ページをスクロールすると
-
画像が縦方向にも横方向にも動きます
-
新しいアニメーションを作成しましょう
-
[ファイル]>[新規作成]を選択し
-
[環境]は
[ディスプレイ＆ビデオ360]に設定してください
-
コンポーネントをプロジェクトに追加します
-
[コンポーネント]の[操作]フォルダから
-
コンポーネントをステージにドラッグします
-
コンポーネントの設定を始めるには
-
[プロパティ]を開いて
画像コントロールをクリックするか
-
コンポーネントをダブルクリックします
-
アニメーション用の
画像を追加しましょう
-
画像のファイルを選択し
-
ファイルシステムから
ステージまたは[レイヤ]にドラッグします
-
[レイヤ]のプラスアイコンをクリックして
-
ファイルシステムから画像を
追加することもできます
-
[レイヤ]では レイヤをドラッグして
順序を入れ替えられます
-
レイヤは上から順に重なって表示されます
-
一番上のレイヤが最前面に表示されます
-
サムネイルの横をクリックすると画像ごとに
-
目のアイコンをクリックすると一度に
-
画像の表示と非表示を切り替えられます
-
これはレイヤでの作業に便利です
-
たとえばすべてのレイヤを非表示にしてから
-
商品、テキスト、大きな葉のレイヤを
表示するよう切り替えます
-
設定ダイアログには
[開始]、[終了]
-
[プレビュー]のタブがあります
-
このアニメーションの設定では
-
開始時と終了時に
表示されるレイヤを配置します
-
開始位置は コンポーネントが
最初にウェブページに表示されるとき
-
つまり コンポーネントが最初に現れる
この部分です
-
終了位置は コンポーネントが
ビューポートから消えるときです
-
開始位置を設定します
-
葉のレイヤを非表示にしてから
-
マウス操作で商品を中央に移動します
-
Shiftキーを長押ししながら
矢印キーを押すと
-
10ピクセルずつ動かせます
-
[レイヤのプロパティ]で
直接入力することも可能です
-
終了位置では
開始位置の値をコピーしましょう
-
[開始位置をコピー]をクリックするだけです
-
開始位置と終了位置での
葉のレイヤの配置を調整します
-
Shiftキーを長押ししながら
マウスをドラッグして移動方向を固定し
-
レイヤを終了位置へと移動させます
-
[詳細プロパティ]の
[ゴーストの表示]をオンにすると
-
編集中でないタブでの画像が
半透明で表示されます
-
ゴーストは確認用で
プレビューや
-
パブリッシュしたファイルには
-
表示されません
-
上下にスクロールして
-
モバイルの画面での
レイヤの表示を確認できます
-
[開始]か[終了]をクリックすると
編集を続行できます
-
ここでは イージングの設定を
「イーズインアウト」に変更し
-
テキストが0.3から1に
フェードインするようにします
-
プレビューで見てみましょう
-
レイヤの幅と高さも調節できます
-
葉のレイヤの幅を250ピクセルに変更してみます
-
アスペクト比が固定されているので
-
高さは自動的に調整されます
-
なお レイヤのサイズは
開始位置でも終了位置でも同じです
-
アニメーションではサイズが変化しません
-
設定が完了して[保存]をクリックすると
通常の画面に戻ります
-
時間短縮のため
再度テンプレートファイルを開きます
-
アニメーションはすべて設定済みです
-
[プロパティ]にある[スクロール率]は
-
GWDのステージでの
表示確認用のプロパティです
-
スクロール率を変えた場合の
広告の見え方を確認できます
-
広告はブラウザでもプレビューできます
-
このプレビューでは
-
ウェブページのようにスクロールしたときの
コンポーネントの見え方を再現できます
-
つまり CTAボタンやexitアクションを備えた
-
広告全体の
パララックスアニメーションを確認できます
-
以上で説明を終わります
