Lesson

XD でアニメーションするランディングページをデザイン - 全3回

ページスクロール時のフェードイン効果を作成(アニメーションするランディングページ 3/3)

このレッスンでは、スクロールするとコンテンツがフェードイン表示されるインタラクションのつくり方を解説します。

Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。

フェードイン前後の見た目を作成

今回作成するのは、スクロールすると「Feature」のセクションがフェードイン表示されるアニメーションです。

まず、このシリーズ第2回で作成した「About」のセクションがビューポートの上に隠れているアートボード、すなわち「Feature」のセクションがビューポートに表示されているアートボードを複製します。この複製したアートボードが、フェードイン後の状態です。

複製元のアートボードを編集し、「Feature」セクションにある背景以外のオブジェクトの不透明度を0%にして非表示にします。同じ作業を、「About」のセクションがビューポートの下に隠れているアートボードでも行います。

フェードインアニメーションの設定

プロトタイプモードに移動します。

「About」セクションがビューポートに表示されているアートボードを選択します。そて、青い矢印を「Feature」セクションがビューポートに表示されているアートボードに接続します。

トリガーに「時間」、ディレイに「0秒」、アクションの種類に「自動アニメーション」を指定します。これで、「Feature」セクションがビューポートに表示された瞬間、自動的にアニメーションが開始されます。イージングに「イーズアウト」、デュレーションには「1秒」を指定します。

プレビューして動きを確認

「Feature」のセクションがビューポートの下に隠れているアートボードを選択した状態で、ワークスペース右上の「デスクトッププレビュー」ボタンをクリックし、プレビューウィンドウを開きます。すると、ドラッグ操作によりフェードインアニメーションが開始されることを確認できます。

同様の作業でタイムテーブルのセクションにもフェードインアニメーションを設定できます。