瞭解如何使用 Adobe Muse 新增捲動效果至網站的瀏覽器和背景填色。
套用捲動效果至設定為「瀏覽器填色」的影像
捲動效果可讓您控制瀏覽器背景填色影像及並排或非並排頁面元素的速度。捲動效果可以套用到使用「並排」、「縮放以符合」、「縮放以填滿」或「設為原始大小」之背景影像的瀏覽器填色。依據您在「瀏覽器填色」選單「捲動」區段設定的方向和速度，瀏覽器填色會隨著頁面捲動定向移動。
使用「瀏覽器填色」選單新增影像到瀏覽器填色的背景前，捲動選項呈現灰色，而且無法使用。您無法套用捲動效果至僅以實色或漸層顏色填色的瀏覽器填色。
如何新增捲動效果至瀏覽器填色？
若要設定瀏覽器填色的捲動效果，請依照下列步驟操作：
- 在「設計」視圖中，選擇「頁面 > 頁面屬性」。在「版面」標籤中，將「最小高度」欄位設為 2000 像素。這樣可確保頁面有足夠的長度可供捲動。按一下「確定」儲存變更，並關閉「頁面屬性」對話方塊。
- 按一下「控制」面板中的「瀏覽器填色」連結。在「填色」索引標籤中，按一下「影像」區段旁的檔案夾圖示以在桌上型電腦上選擇影像檔案。在「符合」選單選擇想要的選項，然後啟用「捲動」選項。
- 按一下「捲動」索引標籤。啟用「捲動動作」核取方塊。
請花點時間檢閱「瀏覽器填色」選單的「捲動」區段。中央區段 (目前顯示 0px) 的欄位，會與控制動作的關鍵位置 (T 型控制點位置) 相對應。0px 的預設設定表示，T 型控制點設為瀏覽器視窗最上緣。
關鍵位置欄位中指定的像素數表示，您在「初始動作」區段設定的變更會在頁面捲動到該位置時 (以該方向和該速度) 移動。頁面頂端從 0 開始，越向下捲動頁面，像素數越高。(在「控制」面板和「變形」面板中，與頁面頂端之間的距離稱為 Y 值)。
在「最終動作」區段輸入的值，會在頁面捲動超過關鍵位置 (T 型控制點的位置) 後套用。
套用動作捲動效果的元素 (在本例中，即設為瀏覽器填色的並排影像)，會朝欄位中值大於 0 的方向移動。如果水平和垂直方向都有值設為 0，元素基本上會固定到頁面，不會移動。
在「初始動作」區段中，您會發現欄位中的值旁有小寫的「x」，代表倍數。在瀏覽器填色影像中，「初始動作」區段顯示，瀏覽器填色會以捲動速率 1 倍的速度 (與捲動速率相同的速度) 向上移動。如果訪客加快捲動速度，捲動效果的動作會配合相同的步調，加快速度。
在水平 (左和右) 區段中，欄位顯示「0」，表示瀏覽器填色不會水平左右移動。
「最終動作」區段包含相似的介面。在瀏覽器填色影像中，瀏覽器填色設為以動作速率 1 倍的速度向上移動，且不會水平移動。
將滑鼠游標懸停在「捲動」標籤左下角的「資訊」按鈕 (i 圖示) 上，瞭解捲動效果如何套用至瀏覽器填色。
- 按一下「初始動作」中的箭頭按鈕，指定垂直方向 (上或下) 和/或水平方向 (左或右)，控制瀏覽器填色移動的方向。
- 在「初始動作」區段中，輸入數值或按一下向上和向下箭頭按鈕，設定水平和垂直捲動速度。這些設定將於以下詳加描述。如果速度欄位設為 0，表示捲動時 (抵達關鍵位置前) 元素不會朝該方向移動。
- 更新「最終動作」區段中的值，設定想要的方向，並且在對應欄位中輸入數值，設定捲動效果的速率。
- 若要關閉「瀏覽器填色」選單，請按一下頁面其他任何位置。
- 選擇「檔案 > 在瀏覽器中預視網頁」，以新的瀏覽器視窗載入頁面。捲動頁面，查看捲動動作的效果。
- 完成測試後，結束瀏覽器並回到 Muse。
套用捲動動作至頁面元素背景填色
如何新增捲動效果至背景填色？
針對已將並排或非並排背景影像套用為填色的頁面，捲動動作可以套用至該頁面上的物件。請依照下列步驟操作：
- 在「設計」視圖中編輯頁面時，選擇「頁面 > 頁面屬性」。將「最小高度」設為較高的值，例如 2000 像素，確保頁面具有足夠的長度可供捲動。按一下「確定」儲存變更，並關閉「頁面屬性」對話方塊。或者，新增足夠的頁面內容，建立更長的頁面。
- 在「設計」視圖中，選取「控制」面板中的「矩形」工具。
- 在頁面上繪製矩形。
- 使用「填色」選單，將並排或非並排背景影像設定成矩形填色。
- 按一下「填色」選單中的「捲動」標籤，然後設定捲動選項。
- 按一下「填色」選單中的「捲動」標籤。啟用「動作」核取方塊，開始設定捲動選項。
留意出現在啟用捲動動作之元素上方的 T 型控制點。控制點是關鍵位置 (目前設為元素上方 100px) 的視覺表示。「捲動」標籤中央區段的圖示，會與頁面上 T 型控制點的位置相對應。您可以在中央欄位輸入新值，或是在頁面上拖移 T 型控制點，將關鍵位置重設為執行捲動效果的位置。拖移 T 型控制點時，關鍵位置上方的區域會暫時變暗。
T 型控制點不需要以所選元素為基準向上延伸。您可以按住並拖移 T 型控制點，讓其與元素上緣對齊，或是拖移 T 型控制點，讓其延伸到元素下方。
Muse 在設計過程提供全面的彈性，您可以選擇拖移控制點或是在關鍵位置欄位輸入數字，以精確控制訪客捲動頁面時的移動效果。
「填色」選單中的「捲動」標籤，效果與「瀏覽器填色」選單中的「捲動」標籤相同。
- 選取啟用動作捲動效果的元素後，使用「填色」選單的「捲動」標籤，以指定數值的方式設定關鍵位置，或是按住並拖移頁面上的 T 型控制點，設定關鍵位置。
- 在「初始動作」區段中，設定垂直和水平方向及相對於頁面捲動速度的對應速率。這會設定頁面捲動到關鍵位置前執行的動作。
- 在「最終動作」區段中，設定垂直和水平方向及相對於頁面捲動速度的對應速率。這會設定頁面捲動超過關鍵位置後執行的動作。
在使用「捲動」屬性的影像中，矩形設為以訪客捲動速率 3 倍的速度向右移動至定位，並在瀏覽器中的頁面到達關鍵位置時抵達其在設計中的位置。一旦訪客捲動超過關鍵位置 (100 像素)，矩形會以訪客捲動速率 3 倍的速度開始向左移離位置。在本範例中，矩形不會垂直移動，因為兩個垂直欄位皆設為 0。
- 若要關閉「填色」選單，請按一下頁面其他任何位置。
- 按下「預視」或選擇「檔案 > 在瀏覽器中預視網頁」，測試套用的捲動效果。捲動頁面，查看元素移動。
- 返回 Muse，或是在完成測試後按一下「設計」按鈕，繼續編輯頁面。
登入您的帳戶