瞭解如何新增及使用各種類型的捲動效果,例如片段組合、滑動選單、逐一顯示效果等等。
在本節中,我們將說明眾多捲動效果使用方式中的其中幾種,以便您用於新增互動功能、獨特網站導覽和簡單明瞭的動作圖形到 Muse 網站。
依照下列步驟開始:
此效果會使一組獨立元素在訪客向下捲動頁面時飛入,重新組合進頁面設計。圖形和文字框都是使用建立互動式編譯的捲動效果進行控制,彷彿一片片拼圖結合在一起。以這種方式在網頁呈現產品細節通常能引起人的興趣。
這個範例的工作流程使用「捲動效果」面板「動作」標籤的「初始動作」區段,讓元素結合為整合的設計。各片段就位後,「最終動作」設定會設為 0,現有的元素在新元素飛入時才不會移動。
請依照下列步驟操作來建立類似的片段組合效果:
最後,底部還剩下兩個元素:填有與頁面相同之實色的實色矩形 (使其在設計中隱形),以及其後的物件群組 (有燈泡圖形的黃色矩形)。
實色矩形是用於隱藏排列在它後面的群組。
在同時選取兩個元素的狀態下,您會發現欄位中會顯示所有選取項目均相同的值。在這個範例中,矩形和群組的垂直方向都在「初始動作」區段設為 0,在「最終動作」區段設為 0。「初始動作」區段的水平欄位沒有顯示任何值,因為群組設為以捲動速率 1 倍的速度 (與捲動速率相同的速度) 向左移動,矩形則設為 0。
如同這個簡單的範例所示,您可以結合超長頁面、一系列在「圖層」面板中精心分層顯示的元素,以及「捲動效果」面板的「動作」標籤,來建立頁面向下捲動時,片段以動畫方式結合的錯覺。
滑動選單效果使用許多片段組合效果所述的相同準則。使用「捲動效果」面板的「動作」標籤,創造元素的飛入效果;在部分元素可以在頁面設計現身前,使用矩形將其隱藏。
本範例使用精心放置的矩形群組,建立具有複雜稜角設計的外觀。
在瀏覽器檢視範例網站,觀看飛機由右到左水平飛過頁面,其後接著一組經過設計的選單選項,以及斜紋漸層背景。
請依照下列步驟操作,以建立類似的滑動效果:
群組適用於結合一組元素,並將其視為單一項目控制。在本範例中,不同矩形組成的群組已套用動作捲動效果,讓群組以單一實體的方式移動。
本範例也示範了負空間的創意利用方式。如果瀏覽器填色是套用實色背景顏色,您可以將填滿相同顏色的矩形堆疊在其他矩形上方,創造出許多有趣的剪下效果。您可以使用矩形從 Muse 工作區建構圖形,而不需要用影像編輯程式設計圖形和放置單一圖形。
這個日出和日落動畫範例的製作,結合使用了兩種捲動效果:動作和不透明度。本範例將展示填滿漸層顏色的頁面背景,搭配單一置入的 PNG 太陽影像。PNG 影像包含透明區域,可讓背景頁面填色顏色透出來。
請使用瀏覽器檢閱範例網站,瞭解太陽如何從 100% 透明度淡入上升,在頁面上移動。位於高峰時,太陽是完全不透明,但隨著您繼續向下捲動頁面,太陽逐漸下山,再度變得越來越透明,直到淡出為止。
請依照下列步驟操作,以建立類似的淡化效果:
這些設定會使太陽以半圓路徑移動,從頁面左下側朝上畫一個弧形到中央 (抵達關鍵位置),然後再朝下移動到頁面右下側。
本範例示範了如何使用捲動效果,控制從 Adobe Edge Animate 轉存的 OAM 檔案。在本範例中,頁面是以垂直漸層填色,從淺藍綠色轉變成深藍色。
透過「動作」和「Edge Animate」標籤套用的設定組合,可建立出這個動畫效果。
三個相同 OAM 檔案的執行個體以水平方式並排,建立出一列動畫指南針。在瀏覽器檢視範例網站時,全部三個指南針都會向上移入視野,然後留在原位。三個指南針旋轉的速率各不相同,但導致指南針以不同速度旋轉的是「捲動效果」面板中的設定,不是 Edge 動畫檔案的建構。
請依照下列步驟,以三個置入的 OAM 檔案建立類似的效果:
如果您使用瀏覽器預視樣本,就會看到全部三個 OAM 元素一起跳起來,然後彷彿被固定般排成一列。
兩側的指南針都設為重複播放時間軸動畫,而且頁面每向下捲動 350 像素就切換到下一個影格。
您可以依頁面捲動速度變化多個置入的 Edge Animate 動畫速度,建立有趣的動畫效果。例如,您可以新增多個相同 OAM 檔案的反覆項目,並將其套用不同的捲動效果設定,以建立魚群、飄著浮雲的天空,或是其他效果。
您可以控制「幻燈片展示」Widget 中的影像組合相對於頁面捲動方式的顯示方式。這需要新增「幻燈片展示」Widget 到頁面,然後使用「捲動效果」面板的「幻燈片展示」標籤更新幻燈片展示選項。
在本範例中,幻燈片展示填入了建立 360 度背包旋轉視圖的一連串影像。您可以架起三腳架,拍攝放在旋轉支架上物件的相片,拍攝類似的幻燈片展示影像。此效果對於顯示互動式產品描述相當有用,可協助潛在客戶在購買前從全方位的角度查看項目。
請依照下列步驟操作,使用「幻燈片展示」Widget 建立類似的效果:
在選取幻燈片展示的狀態下,您可以選取「幻燈片展示」Widget,並使用「控制」面板中的「固定」介面固定幻燈片展示。您也可以嘗試新增「全螢幕幻燈片展示」Widget,並以捲動效果加以控制。
您可以使用捲動效果建立非常長的頁面,並將其分割為外觀大相逕庭的多個區段。訪客向下捲動頁面時,他們會在看似逐一顯示的頁面區段間轉換,這些頁面區段具有動畫文字效果和使用陰影效果建立的分隔邊框。
您可以使用錨點標記,或直接新增註解,鼓勵訪客向下捲動頁面,查看每個區段。到達範例網站底部時,按一下「Back to Top」(回到頂端) 按鈕,就會看到錨點連結帶動整個頁面快速捲動返回頁面設計頂端。
請依照下列步驟操作,以建立類似的逐一顯示效果:
在本範例中,複製的文字框內顯示以下文字:Use it to drastically alter the appearance of your website. (將其用於大幅修改網站的外觀)。然而,您可以輸入任何想要的文字,識別頁面的深藍色區段。
您可以結合使用動作捲動效果和 Adobe Edge 網頁字體,建立獨特的印刷設計。網頁字體可讓您使用頁面載入時載入的各種字體設計文字樣式。您可以使用 Edge 網頁字體建立出色且易於更新的頁面,而無須置入影像編輯程式所建立的文字動畫影像。捲動效果會隨著頁面向下捲動,建立強烈的動畫感。
請依照下列步驟操作,以使用動態文字建立類似的效果:
在這個選用的額外步驟中,您可以複製部分文字框,然後套用稍微不同的樣式。本範例複製含有 Create (建立) 這個字的文字框,然後將兩個重複項目相互堆疊,以建立淺藍色的陰影效果。
如果您選擇複製文字框以建立陰影效果,可以將兩個以上的文字框重複項目組成群組,在套用捲動效果時以單一群組的方式進行控制。
您可以使用捲動效果建立引人入勝的互動式網站導覽,讓不同的按鈕飛入頁面上的可見區域,然後自行對齊,建立選單列。在本範例中,四個滑鼠指向效果按鈕會隨著頁面捲動,從底部向上移動,然後鎖住定位,顯示垂直選單列。
四個按鈕對齊後,背景內容 (以燈泡圖形、彩色背景區域、文字框和對角條紋的形式) 會從頁面兩側飛入,建立網站區段。
雖然本範例中的按鈕並未連結,但是如有需要,您可以使用「超連結」下拉式選單新增連結,讓訪客按一下按鈕就可以載入新頁面,或是使用錨點標籤跳到目前頁面上的不同位置。
請依照下列步驟操作,以建立類似的堆疊選單效果:
複製第一個「Home」(首頁) 按鈕時,同時也會複製文字框樣式和其內容,以及捲動效果設定。如果您選取其中一個複製的按鈕,然後查看「捲動效果」面板,就會發現「動作」標籤中的設定與「Home」(首頁) 按鈕所套用的設定相符,每個按鈕的關鍵位置都在前一個按鈕下方 460 像素的地方 (與頁面上每個按鈕之間的距離相同)。
基本的堆疊選單區段現在已完成。但您還可以新增一個設計元素。這向操作需要在大矩形右下角上方新增數個旋轉的矩形,方法與「滑動選單」範例使用旋轉矩形新增斜紋效果相同。
若要建立動作背景效果,您可以建立一連串以並排背景影像填色的大矩形,覆蓋整個長頁面。本範例使用「填色」選單的「捲動」標籤 (而非「捲動效果」面板的「動作」標籤) 套用動作設定。
請依照下列步驟操作,以建立類似的動作背景效果:
在本範例中,您是否設定瀏覽器填色顏色並不重要,因為頁面將被矩形覆蓋。將頁面填色顏色設為「無」。
在範例網站中,第三個矩形比前兩個長。您可以拖移控制點,增加第三個複製矩形的高度,或是建立第四個矩形,以填滿底部剩餘的頁面區域。
在本範例中,長條圖看起來就像以動畫的方式移入定位。粉紅色箭頭圖形向上延伸,穿梭於圖表長條的上方和後方。雖然圖表中的長條看似是從圖表底部越長越高,但是它們其實是套用了動作捲動效果的實色矩形,以從白色大矩形 (填滿與頁面背景顏色相同的實色白色) 後方顯現出來。
本範例將多種技術搭配捲動效果使用。元素是使用「圖層」面板排列在彼此前後。白色矩形繪製在圖表元素上方。白色矩形覆蓋長條圖時,長條和箭頭都隱藏在視野之外,彷彿被遮蔽一般。白色矩形和圖表在動作捲動效果的設定為 0,頁面捲動時會留在原位不動。堆疊在下方的長條和粉紅色箭頭圖形則套用了動作捲動效果,使其在長條圖組合時上移進入視野。
請依照下列步驟操作,以建立類似的遮色片效果:
請造訪 Demential Lab 網站,以查看捲動效果功能實際運作的情況。
登入您的帳戶