【bubble】使い方は色々！スクロール時にエリアを追尾表示させるFloating Group

ノーコーダーのつかさです。

Webサイトを見ているとスクロール時に自動で追尾してくるエリアってありますよね？

広告だと目障りですが、もちろん必要な時もあります。例えばECサイトの商品ページの購入ボタンだとか、掲示板サイトの投稿ボタンだとか。

今回はFloating Groupという機能を使って、自動追尾機能を持つエリアを実装していきましょう！

bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

Floating Groupを作ってみる

早速、左のContainersからFloating Groupを選んでデザインエリアに配置します。またわかりやすいように色を適当に変えておきましょう。

次にFloating Groupの比較対象としてテキストを隣に配置します。文章も適当に書いておきます。

これだけでもFloating Groupの機能は十分確認できるのですが、ちょっとさみしいのでECサイトっぽさを出すためにButtonをFloating Group内に配置して名前を「購入」に変更します。

これで完成です。

Previewから実際に動作を確認してみましょう！

上から下にスクロールを行うとテキストが上に消えていく一方でで購入ボタンが含まれているエリアは常に固定表示されています。

こうした固定表示は意外と色々な場面で利用することがあります。ECサイトの購入ボタンやECサイトの投稿ボタン、SNSのプロフィールなど、サービスのコアになる機能で利用されることが多いのでしっかりとおぼえておきましょう！

それではEnjoy NoCode!