當前網絡上最熱門的技術之一就是視差滾動。 我們都去過那些旋轉鼠標滾輪的網站，當您旋轉鼠標滾輪時，網頁上的內容會上下移動或橫跨頁面。
對於那些不熟悉網頁設計和平面設計的人來說，由於需要CSS的數量，這種技術可能非常難以實現。
如果這樣描述你，有很多應用程序可能會吸引圖形藝術家。 他們基本上使用熟悉的頁面佈局方法來處理網頁，這意味著如果有的話，涉及的代碼並不多。 Adobe Muse已經成為一個突出的應用程序。
圖形專業人員使用Muse進行的工作非常了不起，您可以通過訪問“當日繆斯網站”了解您可以做些什麼。 雖然網絡專業人員傾向於將Muse視為某種“發條玩具”，但它也被設計師用來創建移動和網絡原型，最終將其交給開發團隊。
一種使用Muse非常容易完成的技術是視差滾動，如果您想查看練習的完整版本，我們將通過瀏覽器指向此頁面。 當您滾動鼠標的滾輪時，文字似乎會向上或向下移動頁面，圖像會發生變化。
讓我們開始吧。
07年1月
創建一個網頁
當您啟動Muse時，請點擊新建網站鏈接。 這將打開新網站屬性 。 此項目將設計用於桌面應用程序，您可以在初始佈局下拉菜單中選擇它。 您還可以設置“列數”，“裝訂線寬度”，“邊距”和“填充”的值。 在這種情況下，我們並不擔心這一點，只需點擊確定即可 。
07年2月
格式化頁面
當您設置網站屬性並單擊確定時，您將看到所謂的平面視圖。 頂部有一個主頁 ，窗口底部有一個主頁面 。 我們只需要一頁。 要進入設計視圖，我們雙擊打開界面的主頁。
左邊是一些基本工具，右邊是用於操縱頁面內容的各種面板。 沿著頂部是可以應用於頁面的屬性，或者頁面上選擇的任何內容。 在這種情況下，我們想要有一個黑色的背景。 為了實現這一點，我們點擊瀏覽器填充顏色芯片並從顏色選擇器中選擇黑色。
03年7月
添加文本到頁面
下一步是向頁面添加一些文本。 我們選擇了文本工具並繪出了一個文本框。 我們輸入單詞“歡迎”，並在屬性中將文本設置為Arial，120像素白色。 中心對齊。
然後，我們切換到選擇工具，單擊文本框，並將其Y位置從頂部設置為168像素。 在文本框仍然處於選中狀態的情況下，我們打開“ 對齊”面板並將文本框對齊到中心。
最後，選中文本框，我們按住Option / Alt和Shift鍵並製作了四個文本框。 我們將每個副本的文本和Y位置更改為：
- 到，871
- 圖形，1621
- 軟件，2371
- @ About.com，3181
您會注意到，在設置每個文本框的位置時，頁面會調整大小以適應文本的位置。
04年7月
添加圖片佔位符
下一步是在文本塊之間放置圖像。
第一步是選擇矩形工具並繪製一個從頁面一側延伸到另一側的框。 選擇矩形後，我們將其高度設置為250像素 ，將其Y位置設置為425像素 。 計劃是讓它們總是伸展或縮小到頁面寬度以適應用戶的瀏覽器視口。 為了達到這個目的，我們點擊了屬性中的100％寬度按鈕。 這樣做會使X值變灰，並確保圖像始終為瀏覽器中視口寬度的100％。
07年05月
將圖像添加到圖像佔位符
選擇矩形後，我們單擊填充鏈接 - 不是彩色芯片 -然後單擊我的圖像墨水以在矩形中添加圖像。 在擬合區域中，我們選擇“ 縮放以適合”並單擊“ 位置”區域中的中心手柄 ，以確保圖像從圖像中心縮放。
接下來，我們使用Option / Alt-Shift拖動技術在前兩個文本塊之間創建圖像的副本，打開“填充”面板並將圖像換為另一個。 我們為剩餘的兩張圖片做了這個。
隨著圖像的到位，是時候添加運動了。
06年7月
添加視差滾動
在Adobe Muse中添加視差滾動有許多方法。 我們將向您展示一個簡單的方法。
打開“填充”面板後，單擊“ 滾動”選項卡，並在打開時單擊“ 移動”複選框 。
您將看到初始和最終動作的值。 這些決定了圖像相對於滾輪移動的速度。 例如，1.5的值會使圖像比輪子快1.5倍。 我們使用值0來鎖定圖像。
水平和垂直箭頭確定運動的方向。 如果值為0，則無論您單擊哪個箭頭，圖像都不會移動。
中間值 - 鍵位置 - 顯示圖像開始移動的位置。 圖像上方的行開始，對於此圖像，從頁面頂部開始為325像素。 當滾動達到該值時，圖像開始移動。 您可以更改該值，方法是在對話框中更改該值，或者通過單擊並拖動該行頂部的點向上或向下拖動該值。
對頁面上的其他圖像重複此操作。
07年7月
瀏覽器測試
此時，我們完成了。 出於顯而易見的原因，我們做的第一件事是選擇File> Save Site 。 要進行瀏覽器測試，我們只需在瀏覽器中選擇文件>預覽頁面 。 這打開了我們計算機的默認瀏覽器，當頁面打開時，我們開始滾動。