このドキュメントは、Framerを学ぶ国内ユーザーが日本語資料の不足で困っているのを解決するために、公式ブログの内容を日本語に翻訳し、実務で役立つ情報を追加しました。Framerを使用している皆さんに少しでも助けになることを願っています。

FramerのYouTubeチャンネルを購読してください。

あなたのウェブサイトのナビゲーションをより直感的でアクセスしやすくしたいですか？それなら、スクロール時に表示されるフローティングナビゲーションを検討してみましょう。今回のチュートリアルでは、ユーザーがスクロールを始めた瞬間に現れ、ページの終わりまで維持されるナビゲーションを作る方法をステップごとに見ていきます。

プロジェクトを設定する

始める前に、プロジェクトを準備します。一般的なナビゲーションをページの上部に固定し、フローティングナビゲーションを別に作成します。フローティングナビゲーションは位置をfixedにし、上から20ピクセル、左右にも20ピクセル離して設定します。

スクロールセクションを定義する

フローティングナビゲーションが現れるタイミングを決めるために、スクロールセクションを定義する必要があります。ヒーローセクションにスクロールセクションを追加し、名前を「hero」に指定します。フローティングナビゲーションを選択後、スクロールアニメーション効果を追加し、トリガーをsection in viewに設定した後、heroセクションを指定します。ビューポートをtopに設定すれば、ヒーローセクションがビューポートの上端に触れる瞬間にアニメーションが実行されます。

アニメーションをカスタマイズする

次に、フローティングナビゲーションのアニメーションを設定します。オパシティを1にし、スケールも1に合わせます。同時にナビゲーションを画面外に出すために、Y値を-110に設定します。これでプレビューした際にスクロールをすると、ナビゲーションが自然に現れるのを確認できます。

ナビゲーション消失問題の解決

時折、ナビゲーションがヒーローセクションがビューポートから消える瞬間に消えてしまう問題が発生することがあります。その場合は、スクロールアニメーションのenterおよびexitトランジションをロック解除し、exitアニメーションを除去することで問題を解決できます。

オフセットを追加する

最後に、アニメーションが少し早く実行されるようにオフセットを追加します。ヒーローセクションにYオフセットを10ピクセルに指定すると、ヒーローセクションがビューポートの上端に達する10ピクセル前にアニメーションが開始されます。

結論

Framerでスクロール時に表示されるフローティングナビゲーションは、簡単で効果的な方法でユーザーエクスペリエンスを向上させ、ナビゲーションのアクセシビリティを高めることができます。このプロセスを辿ることで、誰でも自身のウェブサイトのナビゲーションをより直感的に変えることができます。

例を見て追ってみましょう →

こちらの文章は、Framerの公式ブログ『高度なスクロールトリガーナビゲーション: UXデザイナーのための実装ガイド』を翻訳・改編したコンテンツです。