🐴

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

2021/12/21に公開

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

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

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

前回までのプレビュー

https://framer.com/share/kamakura-dev-routing--wNee6EG9CZCnoJbohcTO/Ih6d4c8rJ

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

Scroll Componentを使う

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

  1. Scrollさせたいコンテンツを別のScreenに分ける
  2. Scrollエリアを置きたい画面にScroll Componentを設置する
  3. 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に繋げます。

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

https://framer.com/share/kamakura-dev-scroll--8IwyduLVWYQZV7kiVsFx/Ih6d4c8rJ



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 TopNavsの位置に合わせて調整します。

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

ここまでのプレビュー

https://framer.com/share/kamakura-dev-fixed-layout-scroll--bMuvX7xD90RbLzLYgHRd/Ih6d4c8rJ



おまけ

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

OS/Platform Download
Android
iOS


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


Discussion

ログインするとコメントできます