【Bubble】ホバーされたアイテムをゆっくりと拡大する方法

今回は、Bubbleで特定のグループにホバーした際に、グループのサイズが拡大するエフェクトを設定する方法について解説します。この手法を使えば、ユーザーの視覚的な注意を引くデザインが可能になります。

運営：株式会社Spovisor（スポバイザー）

株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。

無料で相談

ゴールイメージ

ステップ1: グループの基本設定

1. リピーティンググループを設置
   • リピーティンググループを設置します
2. リピーティンググループ内にグループを配置
   • デザインタブで新しいグループ（例: ここではGroup itemとGroup 中身）をキャンバスに追加します。
3. レイアウト設定
   • グループ（Group 中身）のレイアウトタブでマージンを設定します。
     • 上下左右のマージンを適切な値（例: ここあでは10pxとしています）に設定。

ステップ2: 条件を設定する

1. 条件タブを開く
   • グループのプロパティエディターで「Conditional」タブを選択します。
2. ホバー時の条件を追加
   • When条件に「This Group is hovered」を設定。
   • 条件が満たされたときに次のプロパティを変更します。
   • 元々のマージンを10pxにしていた場合は5pxなどに設定します。
     • マージン
       • Bottom margin: 5px。
       • Left margin: 5px。
       • Right margin: 5px。
       • Top margin: 5px。

ステップ3: トランジション効果の設定

1. アニメーションを追加
   • Appearanceタブに戻り、「Bottom margin transition」「Left margin transition」「Right margin transition」「Top margin transition」にトランジション効果を追加。
     • Duration: 200ms
     • Animation type: Linear
2. スムーズな動きの確認
   • アニメーション効果を設定することで、拡大が滑らかに実行されるようになります。

ステップ4: プレビューで動作確認

1. プレビュー実行
   • プレビューを実行して、マウスをグループにホバーした際の動きを確認します。
   • サイズが拡大し、エフェクトが正しく適用されていることを確認します。
2. 調整
   • 必要に応じて、マージンやトランジションの時間を微調整します。

応用例

• カードの選択時強調
  • 商品カードやプロフィールカードを拡大表示。
• ボタンのエフェクト
  • ボタンホバー時にわずかに拡大し、クリック可能性を高める。

このように簡単な設定で、視覚的に魅力的なインターフェースを実現できます。ぜひ活用してみてください！

運営：株式会社Spovisor（スポバイザー）

株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。

無料で相談