料金プランを有効化して学習を始めましょう。
Show and hide navigation bar on scroll

スクロール時のナブバー表示・非表示

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

レッスン内容

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

  1. ナビゲーションバーを選択し、その位置がビューポートに対して固定されていることを確認します
  2. インタラクションパネルで、When Scrolled Down を Start an Animationメニューから選択します
  3. 名前を付けます(例: "nav leave")
  4. タイムアクションの横にあるプラス記号をクリックします
  5. Move(移動)の下で、Y軸を調整して、ナビゲーションバーがビューポートの外側に配置されるようにします
  6. イージングカーブと所要時間を調整します

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

  1. ナビゲーションバーを選択します
  2. インタラクションパネルで、Start an AnimationをWhen Scrolled Upメニューから選択します
  3. 名前を付けます(例: "nav enter")
  4. タイムアクションの横にあるプラス記号をクリックします
  5. Move(移動)の下で、Y軸を0に戻します
  6. イージングカーブと所要時間を調整します

プレビューで作業内容を確認してください。

関連レッスン

No items found.

コースのレッスン

No items found.

次のレッスン

サポート

チャットで講師に質問を聞きましょう

質問する

学習進捗

閲覧後に「完了」を押して、進捗を保存しましょう