#49 | スクロール時のナビゲーションバーの表示・非表示

スクロール時に反応するナビバーインタラクションを構築します。

目次

 このレッスンでは

  1. ナビバーを表示しないようにする
  2. ナビバーを再表示させる 

1.ナビバーを表示しないようにする

  1. ナビバーを選択し、その位置がビューポートに固定されていることを確認します。
  2. インタラクションパネルで、スクロールダウン時メニューからアニメーションを開始するを選択します。
  3. 名前を付ける(例:「nav leave」)。
  4. Timed actionsの隣にあるプラス記号をクリックします。
  5. 移動で、ナビバーがビューポートの外に出るまでY軸を変更します。
  6. イージングカーブとデュレーションを調整します

2.ナビバーを再表示する

  1. ナブバーを選択する
  2. インタラクションパネルで、スクロールアップ時メニューからアニメーションを開始を選択します。
  3. 名前を付ける(例:「nav enter」)。
  4. タイムド・アクションの横のプラス記号をクリックします
  5. 「移動」で、Y軸を0に戻します。
  6. イージングカーブとデュレーションを調整する
  7. プレビューで作品を確認します。