🐴

Framer + RemixでWebサイトをつくる #8 - スクロールと固定レイアウト

2021/12/21に公開

Framer

引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。
サイトの要件などに興味ある方は1日目の記事をご覧ください。

8日目 - スクロールと固定レイアウトをできるようにする

前回までで画面遷移ができるようになりました。

前回までのプレビュー

ここで紹介画面の内容が下に切れていてスクロールすることが現在できない状態です。というわけで、スクロールできるようにしてみます。

Scroll Componentを使う

Framer上でScrollさせるにはスクロールエリアを決めなければなりません。それには次の対応が必要です。

Scrollさせたいコンテンツを別のScreenに分ける
Scrollエリアを置きたい画面にScroll Componentを設置する
Scroll Componentと先ほどわけたコンテンツのScreenを繋ぐ

Scrollさせたいコンテンツを別のScreenに分ける

Screenボタンからもう一つ追加してそこにとりあえずPage Wrapperレイヤーごと移動させます。
で、わかりやすい様にScreenの名前を contents: Introduction としておきます。

また、スクロールで全て表示できるようにしたいので、contents: Introduction Screenの高さを伸ばして現在隠れている下の部分を全部見えるようにしておきます。

Scrollエリアを置きたい画面にScroll Componentを設置する

Framerの画面上にあるScrollをクリックして、Scroll Componentをスクロールさせたい場所、つまり　Introduction Screen全体に敷きます。

Scroll Componentと先ほどわけたコンテンツのScreenを繋ぐ

Scroll Componentが設置できたら右の丸ポチをクリックして線をスクロールさせたいcontents: Introduction Screenに繋げます。

これでスクロールは完成。

Scroll Componentの細かい設定

スクロールの実現には、画面とスクロールコンテンツとScreenで表現するのは若干まどろっこしいですが手順としては簡単です。

尚、Scroll Componentをクリックして選択状態にすると右のコンパネからスクロールのオプション設定をすることも可能です。

項目	説明
Native	スマートフォンデバイスでスクロールする際にオーバースクロールを適応するかどうか、またこれを`true` にしておかないとスクロールがカクカクします
Direcrion	スクロールを許可する方向です。上下、左右、全方向のいずれか
Offset Y	レンダリング時のスクロール開始位置を指定できます
Scroll Bar	スクロールバーの表示・非表示
Reset	スクロールポジションの維持。別画面から戻ってきたりした際に維持するかどうか
Content	スクロールさせたいScreen（コンテンツ）を指定。線で結ぶことと同じ

イベントページへのボタンを固定してみる

今のままではイベントページへ遷移するボタンもスクロールされてしまいます。これを固定（CSSでいうところの　position: fixed）できるようにしてみます。

手順は簡単。

contents: Introduction Screenにある Navs レイヤーを Introduction Screenの一番上のレイヤーへ移動します。Scroll　Componentはそのままで良いです。

contents: Introduction ScreenのPage Wrapper Stack　のPadding TopをNavsの位置に合わせて調整します。

要するに Introduction ScreenのScroll Comoponent以外はおけば自然と固定になるってだけの単純な話です。

ここまでのプレビュー

おまけ

ちなみに、Framerは専用のアプリをインストールすることでスマートフォンでもプレビューできます。アプリをインストールして、プレビューの「Mobile」からQRコードを表示してアプリの「Live」からスキャンしてください。

OS/Platform	Download
Android
iOS

というわけで、今回はスクロールと固定レイアウトを実践してみました。次回はこれを活用してトップナビゲーションバーとドロワーメニューを作成し、よりサイトらしくしてみようと思います。