ノーコーダーのつかさです。
Webサイトを見ているとスクロール時に自動で追尾してくるエリアってありますよね？
広告だと目障りですが、もちろん必要な時もあります。例えばECサイトの商品ページの購入ボタンだとか、掲示板サイトの投稿ボタンだとか。
今回はFloating Groupという機能を使って、自動追尾機能を持つエリアを実装していきましょう！
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
Floating Groupを作ってみる
早速、左のContainersからFloating Groupを選んでデザインエリアに配置します。またわかりやすいように色を適当に変えておきましょう。
- Floating Groupをデザインエリア内に配置
- 色を変更
次にFloating Groupの比較対象としてテキストを隣に配置します。文章も適当に書いておきます。
- TextをFloating Groupの隣に配置
- 適当に文章を書く
これだけでもFloating Groupの機能は十分確認できるのですが、ちょっとさみしいのでECサイトっぽさを出すためにButtonをFloating Group内に配置して名前を「購入」に変更します。
- ButtonをFloating Group内に配置する
- Appearanceを「購入」に変更する
これで完成です。
動作を確認してみる
Previewから実際に動作を確認してみましょう！
上から下にスクロールを行うとテキストが上に消えていく一方でで購入ボタンが含まれているエリアは常に固定表示されています。
まとめ
こうした固定表示は意外と色々な場面で利用することがあります。ECサイトの購入ボタンやECサイトの投稿ボタン、SNSのプロフィールなど、サービスのコアになる機能で利用されることが多いのでしっかりとおぼえておきましょう！
それではEnjoy NoCode!
コメント
[…] Floating Groupがわからない方はこちらから！ […]