瞭解如何在 Adobe Muse 中,針對頁面元素套用動作和不透明度捲動效果。
「捲動效果」面板包含四個不同的標籤,可根據頁面捲動方式控制動作、不透明度、幻燈片展示 Widget 和 Adobe Edge Animate 內容。若將捲動效果彼此搭配使用,且將部分元素固定、設為 100% 寬度及/或使用「圖層」面板排列在彼此上方和後方,可以建立出各式各樣引人注目的效果。
「捲動效果」面板的介面,與瀏覽器填色和背景填色的「捲動效果」面板類似。請依照以下步驟,使用「捲動效果」面板的「動作」索引標籤,將捲動效果套用至頁面:
在下方所示的範例中,關鍵位置設為 500 像素。瀏覽器開始捲動時,元素會以 1 倍的速率 (也就是和頁面捲動速率相同的速率) 向下移至定位。頁面捲動到關鍵位置時,元素便抵達定位。一旦頁面捲動超過關鍵位置,元素便會以 2 倍於頁面捲動的速度向右移動。
在本節中,您會看到如何將轉換效果套用到可見度,根據訪客的捲動互動情況,變更元素的顯示。此方法對於顯示和隱藏內容相當實用,能讓項目在訪客向下捲動到頁面新區段時淡入或淡出。請依照下列步驟,使用「捲動效果」面板的「不透明度」標籤,套用影響頁面元素透明度的捲動效果:
啟用「不透明度」選項會使元素上方出現不同類型的控制點。就像「動作」標籤中用來設定關鍵位置的 T 型控制點一樣,您可以按住控制點並將其拖移到元素上方、將其向下拖移使其對齊上緣 (或元素任何部分上方),或是將其向下拖移到元素下方。「不透明度」控制點有三個不同的部分,可以單獨拖移以設定「關鍵位置」、「淡化位置 1」和「淡化位置 2」的值。
如有需要,可以沿著淡化位置控制點拖移關鍵位置,將其設為相同的值。如果不拖移控制點,您也可以在「捲動效果」面板為每個欄位輸入數值。
在本範例中,元素從一開始的完全透明漸漸變得不透明,並在頁面抵達關鍵位置時變成完全不透明 (對應到關鍵位置的「不透明度」值目前設為 100%)。一旦頁面捲動超過關鍵位置,元素會再逐漸變透明,並在頁面捲動超過 200 像素時淡出消失。
捲動動作還有一個常見用途,就是將捲動互動和幻燈片展示中的影像顯示結合。您可以新增「幻燈片展示」Widget 到頁面,然後使用「捲動效果」面板的「幻燈片展示」標籤套用捲動效果,例如每當頁面捲動到特定位置,就在幻燈片展示自動顯示新影像。
按一下「幻燈片展示」標籤 (從左邊數來第三個標籤),檢閱此區段的設定。
捲動動作介面的這個部分常用來將「幻燈片展示」Widget 固定到頁面。一般而言,「幻燈片展示」Widget 會 (使用「選項」選單) 設定為僅顯示較大的幻燈片展示容器,同時隱藏縮圖及「下一個」和「上一個」按鈕。
雖然您選擇新增的「幻燈片展示」Widget 類型最終取決於網站設計,不過「全螢幕」幻燈片展示尤其適合這個效果。
依照下列步驟將捲動效果套用至「幻燈片展示」Widget:
一旦新增並設定固定的幻燈片展示,就可以新增捲動效果。
在選取「幻燈片展示」Widget 的狀態下,於「捲動效果」面板的「幻燈片展示」索引標籤中,啟用「幻燈片展示」核取方塊。
請注意,「幻燈片展示」選項一經啟用,關鍵位置的控制點便會新增到「設計」視圖中的幻燈片展示。如果您要更新關鍵捲動位置值,可以拖移控制點的左側和右側,或是在「關鍵捲動位置」欄位輸入數字。您也可以按一下「捲動效果」面板的向上和向下箭頭,增減數值。
「捲動效果」面板的「幻燈片展示」標籤介面包含兩個按鈕,代表您可控制幻燈片展示影像播放的兩種方式。您可以將幻燈片展示設定為自動播放,或者您可以將它設定為,根據頁面捲動逐步變換影像。
若要使用第一個方法,請設定想要的關鍵位置,然後啟用「自動播放」核取方塊。
頁面捲動超過關鍵位置時 (或訪客按一下錨點標記連結,在頁面向下跳到超過關鍵位置的位置時),幻燈片展示開始播放。自動播放功能會持續顯示影像、重複播放整組影像,直到頁面向上捲動回關鍵位置上方,或是訪客離開頁面。
在上方影像顯示的範例中,當頁面捲動到 100 像素 (或關鍵位置設定以下的任何地方) 時,幻燈片展示便會開始播放。如果訪客往回向上捲動,頁面捲動到關鍵位置上方 (99 像素以下) 時,幻燈片展示會停止播放。
若要使用控制「幻燈片展示」Widget 的第二個方法,請設定關鍵位置,然後啟用「切換投影片間隔」選項按鈕。在此工作流程中,您也可以在選項按鈕下方的欄位中設定像素數,表示幻燈片展示中的影像根據頁面向下捲動的距離變換的頻率。
例如,您可以將「幻燈片展示」Widget 固定到較長的頁面,讓它在其他頁面內容捲動時,維持在固定的位置。藉由設定「切換投影片間隔」的數值,您可以將幻燈片展示設定為,每當頁面向下捲動到指定的像素數,就切換到組合中的下一張影像。
在上方影像中,關鍵位置設為 200。一旦頁面捲動超過距頂端 200 像素處,頁面每捲動 30 像素,幻燈片展示就會顯示影像系列中的下一張影像。
Adobe Edge Animate 是直覺化的設計工具,能讓您建立 HTML5 網頁動畫。您可以使用 Edge Animate 中的介面,以重複播放動作圖形與符號建立排版。使用 Adobe Edge Animate 建立的動畫,可以轉存成 OAM 檔案,然後置入 Muse 網站的頁面。使用 Edge Animate 建立的動畫,不需要外掛程式就能在瀏覽器播放。
使用 Adobe Edge Animate 建構動畫時,請將元素拖移到舞台上,然後使用時間軸操控元素的移動。除了將元素直接新增到主時間軸,您還可以建立具有子元素的巢狀元素,其子元素將使用本身的內部時間軸播放。若要瞭解有關使用 Adobe Edge Animate 的詳細資訊,請參閱 Adobe Edge Animate 產品頁。另請觀賞 Adobe TV 的 Adobe Edge Animate 視訊教學課程。
若要使用 Adobe Edge Animate 捲動動作功能,首先需要為此專門設計排版。捲動效果可以套用到 OAM 檔案,影響放置在主時間軸的動畫。透過有策略地設計動畫,只讓您要在頁面捲動時移動的項目位於主時間軸上 (並將動畫中的其他所有項目都放在巢狀符號時間軸中),您便可以建立出互動式動畫。訪客捲動頁面時,捲動效果設定只會控制主時間軸上動畫元素的播放。
如需建立要特別新增至 Adobe Muse 網站的動畫,請參閱新增 Adobe Edge Animate 內容。
請依照下列步驟使用「捲動效果」面板的「幻燈片展示」標籤:
在上方影像中,關鍵位置設為 50 像素。您可以拖移 T 型控制點,或是在「關鍵位置」欄位輸入不同的值加以調整。
設定關鍵位置後,您可以使用兩個選項控制動畫播放:
任何巢狀或是從 Adobe Edge Animate 排版中的主時間軸連結的動畫物件,都不會受捲動動作效果設定影響。因此,您可以選擇使用靜態背景,或是無論訪客捲動頁面的行為為何,都持續重複播放不斷移動的巢狀元素。
登入您的帳戶