オーバーレイ・モーダル

Framerのオーバーレイは、ウェブサイトやアプリケーションに動的な要素を追加するための強力な機能です。以下にオーバーレイの主な特徴と使用方法を説明します。

オーバーレイの種類

Framerには主に2種類のオーバーレイがあります：

1. 相対的オーバーレイ（Relative）：特定の要素に紐づき、その要素と一緒に移動します。

• ドロップダウンメニュー

• ポップオーバー（ツールチップなど）

2. 固定オーバーレイ（Fixed）：画面に固定されます。

• モーダルウィンドウ

• スライドインサイドバー

オーバーレイの作成方法

1. 要素を選択し、プロパティパネルの「Overlay」オプションをクリックします。

2. 相対的か固定かを選択します。

3. デザインを追加し、カスタマイズオプションを設定します。

カスタマイズオプション

• 表示トリガー：ホバーまたはクリック

• 位置と整列

• アニメーション：フェードイン、スライドインなど

• 背景色と透明度

• Z-インデックス（重なり順）

• ページスクロールの有効/無効

オーバーレイを使用することで、ウェブサイトやアプリケーションにインタラクティブな要素を簡単に追加でき、ユーザーエクスペリエンスを向上させることができます。