在 Adobe Muse 網站中套用捲動效果

「捲動效果」面板包含四個不同的標籤，可根據頁面捲動方式控制動作、不透明度、幻燈片展示 Widget 和 Adobe Edge Animate 內容。若將捲動效果彼此搭配使用，且將部分元素固定、設為 100% 寬度及/或使用「圖層」面板排列在彼此上方和後方，可以建立出各式各樣引人注目的效果。

「捲動效果」面板的介面，與瀏覽器填色和背景填色的「捲動效果」面板類似。請依照以下步驟，使用「捲動效果」面板的「動作」索引標籤，將捲動效果套用至頁面：

1. 在 Muse 中，切換至「設計」視圖，然後選取「頁面 > 頁面屬性」。
2. 將「最小高度」的值設定為最低 2000 像素，以確保頁面有足夠的長度可供捲動。
3. 按一下「確定」儲存變更，並關閉「頁面屬性」對話方塊。
4. 在「設計」視圖中，於頁面上繪製矩形或文字框。
5. 使用「填色」選單的「填滿」標籤，新增並排或非並排背景影像。或是直接選取實色或漸層填色顏色。
6. 選擇「視窗 > 捲動效果」，開啟「捲動效果」面板。
   

7. 啟用捲動效果：在「捲動效果」面板上會顯示「動作」索引標籤 (最左側)。在選取頁面元素的狀態下，啟用「動作」核取方塊。
   
   祕訣：請注意，啟用「動作」核取方塊後會新增延伸超出元素上緣的 T 型控制點。T 型控制點代表套用至元素之「捲動效果」所套用的關鍵位置。「捲動效果」在訪客捲動頁面接近「關鍵位置」時開始生效。
   
   T 型控制點的控制項預設會出現在元素上方。但是，您可以按住並拖移控制點將其向上延伸到更高位置、向下拖移以對齊您要控制之元素的上緣，或是將控制點向下拖移至元素下方。
   
   
8. 定位 T 型控制點以設定關鍵位置：拖移 T 型控制點以設定關鍵位置。這可讓您設定捲動頁面到達 T 型控制點上方之前和之後會發生的動作。
   
   或者，您可以在「動作」標籤為作用中時，於「捲動效果」面板中央的「關鍵位置」欄位輸入數值。在上方影像中，關鍵位置設為 200 像素。 
   
   T 型控制點的位置代表元素的關鍵位置。頁面垂直捲動時，會套用「初始動作」區段中的設定，讓元素的位置符合「設計」視圖中顯示的位置。
   
   一旦訪客捲動頁面，或是按一下錨點連結，跳到超過元素關鍵位置的位置，隨即會套用「最終動作」區段中的設定。
   
   「初始動作」區段包含一組垂直和水平方向的箭頭與速度選項。
   
   
9. 設定初始動作的垂直方向：按一下其中一個垂直按鈕以選擇垂直方向 (上或下)。在垂直方向箭頭旁的欄位輸入速度值，設定相對於頁面捲動速度的移動速度。如果您輸入 0，元素不會垂直移動。您也可以使用小數點輸入百分比。例如，如果您輸入 0.5，元素就會以頁面捲動速率的一半速率垂直移動。
   
   
10. 設定初始動作的水平方向：按一下向左或向右箭頭，設定元素抵達關鍵位置之前的移動方向，以設定捲動元素的水平方向 (左或右)。在水平箭頭右邊的欄位中，設定水平方向的速度值。如果您不希望元素以水平方向移動，請將初始水平速度欄位設定為 0。
    
    
11. 重複步驟 7 和 8，為「最終動作」區段設定動作的方向和速率。

在下方所示的範例中，關鍵位置設為 500 像素。瀏覽器開始捲動時，元素會以 1 倍的速率 (也就是和頁面捲動速率相同的速率) 向下移至定位。頁面捲動到關鍵位置時，元素便抵達定位。一旦頁面捲動超過關鍵位置，元素便會以 2 倍於頁面捲動的速度向右移動。

12. 按下「預視」或選擇「檔案 > 在瀏覽器中預視網頁」，測試捲動效果。上下捲動頁面，查看元素移動。
13. 返回 Muse，或是在完成測試後按一下「設計」按鈕，繼續編輯頁面。

在本節中，您會看到如何將轉換效果套用到可見度，根據訪客的捲動互動情況，變更元素的顯示。此方法對於顯示和隱藏內容相當實用，能讓項目在訪客向下捲動到頁面新區段時淡入或淡出。請依照下列步驟，使用「捲動效果」面板的「不透明度」標籤，套用影響頁面元素透明度的捲動效果：

1. 在「設計」視圖編輯頁面時，確認「頁面屬性」的「最小高度」欄位中，有高於多數螢幕平均高度的像素值，例如 2000 像素。或者，您可以新增頁面內容到頁面，確保頁面具有足夠的長度可供捲動。
2. 在「設計」視圖中，於頁面上繪製矩形或文字框。
3. 使用「填色」選單 (或使用「填色」面板) 的「填滿」標籤，將並排或非並排背景影像新增到選取的頁面元素，或是設定實色或漸層填色顏色。(或者，您也可以新增「幻燈片展示」Widget，或是在頁面放置 Adobe Edge Animate OAM 檔案。)
4. 在選取元素的狀態下，按一下「捲動效果」面板中的「不透明度」索引標籤 (左邊數過來第二個索引標籤)，然後啟用「不透明度」核取方塊。
   

啟用「不透明度」選項會使元素上方出現不同類型的控制點。就像「動作」標籤中用來設定關鍵位置的 T 型控制點一樣，您可以按住控制點並將其拖移到元素上方、將其向下拖移使其對齊上緣 (或元素任何部分上方)，或是將其向下拖移到元素下方。「不透明度」控制點有三個不同的部分，可以單獨拖移以設定「關鍵位置」、「淡化位置 1」和「淡化位置 2」的值。

5. 按住並拖移控制點中間的方形部分，設定關鍵位置。在下方所示的範例中，關鍵位置設為 150 像素。

6. 按一下並拖移控制點最上方的圓形部分，將其放在想要的位置。在下方所示的範例中，「淡化位置 1」設為 100 像素。
   

7. 按住並拖移控制點的下方圓形部分，將其放在想要的位置。在下方所示的範例中，「淡化位置 2」設為 200 像素。

在本範例中，元素從一開始的完全透明漸漸變得不透明，並在頁面抵達關鍵位置時變成完全不透明 (對應到關鍵位置的「不透明度」值目前設為 100%)。一旦頁面捲動超過關鍵位置，元素會再逐漸變透明，並在頁面捲動超過 200 像素時淡出消失。

8. 按下「預視」或選擇「檔案 > 在瀏覽器中預視網頁」，測試捲動效果。上下捲動頁面，查看元素相對於頁面捲動的不透明度變化。
9. 返回 Muse，或是在完成測試後按一下「設計」按鈕，繼續編輯頁面。
   

捲動動作還有一個常見用途，就是將捲動互動和幻燈片展示中的影像顯示結合。您可以新增「幻燈片展示」Widget 到頁面，然後使用「捲動效果」面板的「幻燈片展示」標籤套用捲動效果，例如每當頁面捲動到特定位置，就在幻燈片展示自動顯示新影像。

按一下「幻燈片展示」標籤 (從左邊數來第三個標籤)，檢閱此區段的設定。

捲動動作介面的這個部分常用來將「幻燈片展示」Widget 固定到頁面。一般而言，「幻燈片展示」Widget 會 (使用「選項」選單) 設定為僅顯示較大的幻燈片展示容器，同時隱藏縮圖及「下一個」和「上一個」按鈕。

雖然您選擇新增的「幻燈片展示」Widget 類型最終取決於網站設計，不過「全螢幕」幻燈片展示尤其適合這個效果。

依照下列步驟將捲動效果套用至「幻燈片展示」Widget：

1. 在「頁面屬性」對話方塊更新「最小高度」欄位，以使頁面具有足夠的高度可供捲動。或者，新增內容，建立更長的頁面。
2. 從「Widget 程式庫」將「幻燈片展示」Widget 拖移至頁面。使用「選項」選單，設定幻燈片展示選項。(套用捲動效果到「幻燈片展示」Widget 時，「下一個」、「上一個」和「縮圖」選項通常會停用。)
3. 按一下「選項」選單「影像」區段旁的檔案夾，將影像新增至「幻燈片展示」Widget。瀏覽以選取您要從電腦新增並填入影像收藏館的影像。
4. 使用「控制」面板中的「固定」介面，將幻燈片展示固定至其目前在瀏覽器視窗中的位置。在選取幻燈片展示的狀態下，按一下六個固定位置之一。
   

一旦新增並設定固定的幻燈片展示，就可以新增捲動效果。

在選取「幻燈片展示」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 內容。

請依照下列步驟使用「捲動效果」面板的「幻燈片展示」標籤：

1. 從 Adobe Edge Animate 轉存 OAM 檔案到您的網站檔案夾。
2. 啟動 Muse，然後按兩下頁面，在「設計」視圖中將其開啟。在「頁面屬性」對話方塊更新最小高度設定，或是新增頁面內容建立更長的頁面，以確保頁面具有足夠的長度可供捲動。
3. 選擇「檔案 > 置入」，然後從網站檔案夾中瀏覽至 OAM 檔案並加以選取。
4. 開啟「捲動效果」面板。按一下「Adobe Edge Animate」標籤 (從左邊數來第四個標籤)，檢閱這個區段的設定。
5. 在選取 OAM 檔案的狀態下，啟用「Edge Animate」核取方塊。

在上方影像中，關鍵位置設為 50 像素。您可以拖移 T 型控制點，或是在「關鍵位置」欄位輸入不同的值加以調整。

設定關鍵位置後，您可以使用兩個選項控制動畫播放：

• 自動播放：選取這個選項時，只要瀏覽器捲動到關鍵位置，無論主時間軸中有多少影格，主時間軸中的動畫都會開始播放。動畫會持續播放，直到頁面捲動超過關鍵位置。
• 切換影格間隔：選取這個選項時，每當頁面捲動超過特定像素數，主時間軸動畫就會前進 1 個影格。例如，如果您建立高度 3000 像素的頁面，然後輸入 10 這個數字，主時間軸動畫就會以頁面捲動每 10 像素 1 個影格的速率播放。如果訪客加快向下捲動頁面，動畫播放速率就會增加。
  

6. 在「捲動效果」面板的「Edge Animate」標籤選擇設定後，選擇「檔案 > 在瀏覽器中預視網頁 (或按一下「預視」按鈕)。上下捲動，查看 (新增到主時間軸的) Edge Animate 動畫內容播放，測試頁面。
7. 如果您需要進行任何變更，請返回 Muse (或按一下「設計」按鈕) 並在「捲動效果」面板中更新設定。