スクロール時にナビゲーションバーを表示または非表示にする

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

このチュートリアルの内容:

  1. ナビゲーションバーを非表示にする
  2. ナビゲーションバーを明らかにする 

ナビゲーションバーを非表示にする

  1. ナビゲーションバーを選択し、その位置がビューポートに固定されていることを確認します。
  2. インタラクションパネル内で、スクロールダウンメニューからアニメーションの開始を選択します。
  3. タイトルを割り当てる(例:「ナビゲーションを非表示」)
  4. 時間指定アクションの横にある追加シンボルをクリックします
  5. 移動セクションで、ナビゲーションバーがビューポートの外側に配置されるまでY軸を変更します。
  6. イージングカーブとタイミングをカスタマイズする

ナビゲーションバーを明らかにする

  1. ナビゲーションバーを選択
  2. インタラクションパネルで、上へスクロールするとアニメーションを開始するを選択します。
  3. タイトルを割り当てる(例:「ナビゲーションを表示」)
  4. 時間指定アクションの横にある追加シンボルをクリックします
  5. 移動セクションで、Y軸を0に戻します。
  6. イージングカーブとタイミングをカスタマイズする

プレビューで進捗状況を確認します。

ユアン・マック