製作個人化橫幅動畫

橫幅起到號召性用語的作用，是吸引訪客注意網站上重要公告的一種方法。您可以將橫幅放置在任何位置並根據您的喜好進行設計，但本教學將引導您完成典型公告橫幅的佈局和動畫 - 頁面加載時從導航欄下方出現的橫幅。我們還將演示如何對橫幅進行動畫處理以在滑動動畫後更改其顏色。

透過本教程，您將了解：

1. 如何設計橫幅
2. 如何合併和設計橫幅文本
3. 如何在動畫之前隱藏橫幅
4. 如何整合互動以使橫幅動畫化
5. 如何實現修改橫幅顏色的交互

如何設計橫幅

佈置橫幅的結構：

1. 拖曳一個 分區塊 來自 新增面板 到 Webflow 畫布上
2. 添加一個類別到 分區塊 （例如，「橫幅包裝紙」）
3. 包括另一個 分區塊 在橫幅包裝內
4. 為第二個分配一個類 分區塊 （例如“橫幅”）
5. 使用權 風格面板 > 背景 然後點擊樣本以設定橫幅的背景顏色

如何合併和設計橫幅文本

若要將文字插入橫幅：

1. 插入第三個 分區塊 橫幅內
2. 將一個類別應用到第三個 分區塊 （例如，「文字包裝器」）
3. 打開 風格面板 > 尺寸 並指定一個 最大寬度 （例如，980 像素）
4. 使用權 風格面板 > 間距 並調整兩邊的邊距 汽車

在我們的間距教程中了解有關自動邊距的更多資訊。

要插入和設計橫幅文字：

1. 拖曳一個 段落 來自 新增面板 進入文字包裝器
2. 打開 風格面板 > 版式
3. 點選顏色樣本 顏色 修改文字顏色
4. 輕敲 中心 在 對齊 對齊文字
5. 使用權 風格面板 > 間距 並改變底部 利潤 至 0
6. 包括 填充 在所有 4 條邊上（例如 15 像素）

很高興知道： 若要同時增加或減少元素所有 4 條邊的邊距或填充，請使用 轉移 + 滑鼠拖曳 （在 Mac 上）或 轉移 + 滑鼠拖曳 （在 Windows 上）.

筆記： 您可以在橫幅中插入任何元素（例如文字連結、圖像、按鈕等）.

如何在動畫之前隱藏橫幅

要確保橫幅在動畫開始之前保持隱藏狀態：

1. 選擇橫幅包裝
2. 使用權 風格面板 > 尺寸
3. 調整 溢出 到 隱

了解有關溢出：隱藏的更多資訊。

如何整合互動以使橫幅動畫化

要建立橫幅不可見的初始狀態：

1. 選擇橫幅並打開 互動面板
2. 點選“加” 右側的圖標 頁面觸發 並選擇 頁面載入
3. 點選 行動 下拉式選單中 當頁面開始載入時 並選擇 開始動畫
4. 點選“加” 右側的圖標 定時動畫 並為其命名（例如，“橫幅滑入”）
5. 點選“加” 右側的圖標 行動 並選擇 轉換 > 移動
6. 將 Y 軸設定為 -100% 移動
7. 勾選 設定為初始狀態 checkbox 輸入 定時