瞭解如何使用 Adobe Muse 新增捲動效果至網站的瀏覽器和背景填色。
捲動效果可讓您控制瀏覽器背景填色影像及並排或非並排頁面元素的速度。捲動效果可以套用到使用「並排」、「縮放以符合」、「縮放以填滿」或「設為原始大小」之背景影像的瀏覽器填色。依據您在「瀏覽器填色」選單「捲動」區段設定的方向和速度,瀏覽器填色會隨著頁面捲動定向移動。
使用「瀏覽器填色」選單新增影像到瀏覽器填色的背景前,捲動選項呈現灰色,而且無法使用。您無法套用捲動效果至僅以實色或漸層顏色填色的瀏覽器填色。
若要設定瀏覽器填色的捲動效果,請依照下列步驟操作:
請花點時間檢閱「瀏覽器填色」選單的「捲動」區段。中央區段 (目前顯示 0px) 的欄位,會與控制動作的關鍵位置 (T 型控制點位置) 相對應。0px 的預設設定表示,T 型控制點設為瀏覽器視窗最上緣。
關鍵位置欄位中指定的像素數表示,您在「初始動作」區段設定的變更會在頁面捲動到該位置時 (以該方向和該速度) 移動。頁面頂端從 0 開始,越向下捲動頁面,像素數越高。(在「控制」面板和「變形」面板中,與頁面頂端之間的距離稱為 Y 值)。
在「最終動作」區段輸入的值,會在頁面捲動超過關鍵位置 (T 型控制點的位置) 後套用。
套用動作捲動效果的元素 (在本例中,即設為瀏覽器填色的並排影像),會朝欄位中值大於 0 的方向移動。如果水平和垂直方向都有值設為 0,元素基本上會固定到頁面,不會移動。
在「初始動作」區段中,您會發現欄位中的值旁有小寫的「x」,代表倍數。在瀏覽器填色影像中,「初始動作」區段顯示,瀏覽器填色會以捲動速率 1 倍的速度 (與捲動速率相同的速度) 向上移動。如果訪客加快捲動速度,捲動效果的動作會配合相同的步調,加快速度。
在水平 (左和右) 區段中,欄位顯示「0」,表示瀏覽器填色不會水平左右移動。
「最終動作」區段包含相似的介面。在瀏覽器填色影像中,瀏覽器填色設為以動作速率 1 倍的速度向上移動,且不會水平移動。
將滑鼠游標懸停在「捲動」標籤左下角的「資訊」按鈕 (i 圖示) 上,瞭解捲動效果如何套用至瀏覽器填色。
針對已將並排或非並排背景影像套用為填色的頁面,捲動動作可以套用至該頁面上的物件。請依照下列步驟操作:
留意出現在啟用捲動動作之元素上方的 T 型控制點。控制點是關鍵位置 (目前設為元素上方 100px) 的視覺表示。「捲動」標籤中央區段的圖示,會與頁面上 T 型控制點的位置相對應。您可以在中央欄位輸入新值,或是在頁面上拖移 T 型控制點,將關鍵位置重設為執行捲動效果的位置。拖移 T 型控制點時,關鍵位置上方的區域會暫時變暗。
T 型控制點不需要以所選元素為基準向上延伸。您可以按住並拖移 T 型控制點,讓其與元素上緣對齊,或是拖移 T 型控制點,讓其延伸到元素下方。
Muse 在設計過程提供全面的彈性,您可以選擇拖移控制點或是在關鍵位置欄位輸入數字,以精確控制訪客捲動頁面時的移動效果。
「填色」選單中的「捲動」標籤,效果與「瀏覽器填色」選單中的「捲動」標籤相同。
在使用「捲動」屬性的影像中,矩形設為以訪客捲動速率 3 倍的速度向右移動至定位,並在瀏覽器中的頁面到達關鍵位置時抵達其在設計中的位置。一旦訪客捲動超過關鍵位置 (100 像素),矩形會以訪客捲動速率 3 倍的速度開始向左移離位置。在本範例中,矩形不會垂直移動,因為兩個垂直欄位皆設為 0。
登入您的帳戶