【Adobe XD】手軽に作れる！パララックスアニメーション作成方法

パララックスさせるデザインを作成します。アートボードはビューポートの高さに設定し画面のサイズに合わせましょう。

アートボード外に表示してるブロックは薄く表示されます。

作成したデザインを複製し、表示領域を動かします。

各ボードのレイヤー名が同じでないと自動アニメーションが動作しないので気をつけてください。

プロトタイプの画面へ移動し、キーを押して表示領域が動くように設定します。

1. インタラクション[トリガー]から[キーとゲームパッド]を選択。
2. [↓]矢印キーを押す
3. アクション[種類]の[自動アニメーション]を選びます。
4. イージング、デュレーションは各自お好みで変更してみてください。

※画面を上方向に動かしたい場合は同様に[↑]矢印キーを押して設定してください。

ここまでで下記GIFのように矢印キーを押すとブロックごとに動くようにできたはずです。

つぎに表示領域に合わせてパララックスを設定します。表示領域外のテキスト、オブジェクトを選択して上下に配置を移動させましょう。

画面外のテキストを上からフェードインしてくるようにテキストを上側に配置します。（下記画像参照）

画面右上のレビューボタンをクリックし、プロトタイプ上の動きを確認します。

画面の動きに合わせてテキストが動くようになったのがわかるでしょうか。

現状態でも完成でいいのですがパララックス感が足りない方は他オブジェクトを追加配置してください。

下記画像のようにバラバラに図形を配置しました。

完成

オブジェクトに応じて移動距離がバラバラに動いたら完成です。