13th
Framer Advent Calendar

オーバーレイ・モーダル

ゆうご

ゆうご

Dec 13, 2024

目次

目次

目次

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

オーバーレイの種類

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

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

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

  • ポップオーバー(ツールチップなど)

2. 固定オーバーレイ(Fixed):画面に固定されます。

  • モーダルウィンドウ

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

オーバーレイの作成方法

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

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

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

カスタマイズオプション

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

  • 位置と整列

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

  • 背景色と透明度

  • Z-インデックス(重なり順)

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

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

Please post what you learned from this calendar on X with a hashtag!

What you learned from this calendar,

\ please post it on X with a hashtag! /

Back to calendar

Back to calendar

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English