#50|スクロール時に要素を表示する

ページのスクロールに合わせて、要素をフェードイン、ムーブするトリガーを作成します。

目次

このレッスンでは

  1. トリガーを作成する
  2. アニメーションを作成する
  3. アニメーションを他の要素に適用する

について説明しています。

1. トリガーを作成する

  1. トリガーとなる要素(例:Project Link)を選択し、Interactionsパネルでクリックします。
  2. 要素"トリガー "の隣にあるプラス記号をクリックします。
  3. ドロップダウン・メニューから「Scroll Into View」を選択します。

2. アニメーションを作成する

  1. アクションメニューの「スクロールして表示されたとき」から「アニメーションを開始」を選択します。
  2. 時間指定アクションの横にあるプラス記号をクリックします
  3. 名前を付ける(例:Move up on scroll)。
  4. Timed Actionsの横のプラス記号をクリックし、ドロップダウンメニューからMoveを選択します。
  5. [移動]の下で、Y軸を50ピクセルに変更します。
  6. [タイミング]の横にある[初期状態に設定]をトグルします。
  7. タイミングアクション]の横にあるプラス記号をクリックし、ドロップダウンメニューから[不透明度]を選択します。
  8. 不透明度を0%に変更します。
  9. [タイミング]の横にある[初期状態として[設定]をオンに切り替えます。
  10. [タイミングアクション]の横にあるプラス記号をクリックし、ドロップダウンメニューから[移動]を選択します。
  11. [移動] の下で、Y軸を0ピクセルに変更します。
  12. イージングとデュレーションの調整
  13. タイムラインの0秒にあるプラス記号をクリックし、ドロップダウンメニューから[不透明度]を選択します。
  14. 不透明度を100%に変更します
  15. イージングとデュレーションの調整
  16. [効果] の隣にある [クラス] を選択します。
  17. このクラスを持つすべての要素]をクリックし、[このクラスを持つ子要素のみ]を選択します。

3. アニメーションを他の要素に適用する

  1. アニメーションを終了し、「インタラクション」パネルをクリックします。
  2. [トリガー設定」で、このクラス(例:クラス:プロジェクトリンク)を持つすべての要素に、このアニメーションが適用されることを確認します。
  3. プレビューモードで作品を確認する