このレッスンでは
- トリガーを作成する
- アニメーションを作成する
- アニメーションを他の要素に適用する
について説明しています。
1. トリガーを作成する
- トリガーとなる要素（例：Project Link）を選択し、Interactionsパネルでクリックします。
- 要素"トリガー "の隣にあるプラス記号をクリックします。
- ドロップダウン・メニューから「Scroll Into View」を選択します。
2. アニメーションを作成する
- アクションメニューの「スクロールして表示されたとき」から「アニメーションを開始」を選択します。
- 時間指定アクションの横にあるプラス記号をクリックします
- 名前を付ける（例：Move up on scroll）。
- Timed Actionsの横のプラス記号をクリックし、ドロップダウンメニューからMoveを選択します。
- [移動]の下で、Y軸を50ピクセルに変更します。
- [タイミング]の横にある[初期状態に設定]をトグルします。
- タイミングアクション]の横にあるプラス記号をクリックし、ドロップダウンメニューから[不透明度]を選択します。
- 不透明度を0%に変更します。
- [タイミング]の横にある[初期状態として[設定]をオンに切り替えます。
- [タイミングアクション]の横にあるプラス記号をクリックし、ドロップダウンメニューから[移動]を選択します。
- [移動] の下で、Y軸を0ピクセルに変更します。
- イージングとデュレーションの調整
- タイムラインの0秒にあるプラス記号をクリックし、ドロップダウンメニューから[不透明度]を選択します。
- 不透明度を100%に変更します
- イージングとデュレーションの調整
- [効果] の隣にある [クラス] を選択します。
- このクラスを持つすべての要素]をクリックし、[このクラスを持つ子要素のみ]を選択します。
3. アニメーションを他の要素に適用する
- アニメーションを終了し、「インタラクション」パネルをクリックします。
- [トリガー設定」で、このクラス（例：クラス：プロジェクトリンク）を持つすべての要素に、このアニメーションが適用されることを確認します。
- プレビューモードで作品を確認する