パーソナライズされたバナーをアニメーション化する

バナーは行動喚起として機能し、サイト上の重要なお知らせに訪問者の注意を引く手段です。バナーはどこにでも配置でき、好みに応じてデザインできますが、このチュートリアルでは、ページが読み込まれたときにナビゲーション バーの下から現れる典型的なお知らせバナーのレイアウトとアニメーションについて説明します。また、スライド アニメーションの後にバナーの色を変更するアニメーション化の方法も説明します。

このチュートリアルを通じて、以下のことを理解できるようになります。

1. バナーのデザイン方法
2. バナーテキストの組み込みとデザイン方法
3. アニメーションの前にバナーを隠す方法
4. インタラクションを統合してバナーをアニメーション化する方法
5. バナーの色を変更するインタラクションを実装する方法

バナーのデザイン方法

バナーの構造をレイアウトするには:

1. ドラッグ divブロック から パネルを追加 Webflowキャンバスに
2. クラスを追加する divブロック （例：「バナーラッパー」）
3. 別のものを含める divブロック バナーラッパー内
4. 2番目にクラスを割り当てる divブロック （例：「バナー」）
5. アクセス スタイルパネル > 背景 見本をクリックしてバナーの背景色を設定します

バナーテキストの組み込みとデザイン方法

バナーにテキストを挿入するには:

1. 3番目を挿入 divブロック バナーの内側
2. 3番目にクラスを適用する divブロック （例：「テキストラッパー」）
3. 開ける スタイルパネル > サイズ 指定する 最大W （例：980ピクセル）
4. アクセス スタイルパネル > 間隔 両側の余白を調整して 自動車

自動マージンの詳細については、間隔に関するチュートリアルをご覧ください。

バナーテキストを挿入してデザインするには:

1. ドラッグ 段落 から パネルを追加 テキストラッパーに
2. 開ける スタイルパネル > タイポグラフィ
3. 色見本をタップ 色 テキストの色を変更する
4. タップ 中心 で 整列する テキストを揃える
5. アクセス スタイルパネル > 間隔 下部を変更する マージン 0に
6. 含む パディング 4辺すべて（例：15ピクセル）

知っておくと良いこと: 要素の4辺すべての余白またはパディングを同時に増減するには、 シフト + マウスドラッグ (Macの場合) または シフト + マウスドラッグ (Windowsの場合).

注記： バナーには任意の要素（テキストリンク、画像、ボタンなど）を挿入できます。.

アニメーションの前にバナーを隠す方法

アニメーションが開始する前にバナーが非表示のままになっていることを確認するには:

1. バナーラッパーを選択
2. アクセス スタイルパネル > サイズ
3. 調整する オーバーフロー に 隠れた

Overflow: hidden について詳しくはこちらをご覧ください。

インタラクションを統合してバナーをアニメーション化する方法

バナーが表示されない初期状態を確立するには:

1. バナーを選択して、 インタラクションパネル
2. 「プラス”アイコンの右側にある ページトリガー 選択して ページの読み込み
3. タップして アクション ドロップダウンメニュー ページの読み込みが始まると そして選択する アニメーションを開始する
4. 「プラス”アイコンの右側にある 時間指定アニメーション 名前を付けます（例：「バナースライドイン」）
5. 「プラス”アイコンの右側にある 行動 選択して 変身 > 動く
6. Y軸を-100%に設定する 動く
7. チェックを入れる 初期状態として設定 チェックkbox in タイミング