網頁設計中的視差滾動方法有哪些？

什麽是視差滾動 

視差滾動是電腦圖形學中的一種技術，其中背景圖像通過相機的速度比前景圖像慢，從而在距離的 2D 場景中產生深度錯覺。該技術源於 1930 年代以來傳統動畫中使用的多平面相機技術。

視差滾動在2D電腦圖形學中得到普及，並在1980年代初期引入了影片遊戲。街機影片遊戲 Jump Bug (1981) 中使用了一些視差滾動。它使用了有限的視差滾動形式，主場景滾動，星空固定，雲朵緩慢移動，增加了風景的深度。次年，Moon Patrol (1982) 實現了完整的視差滾動形式，三個獨立的背景層以不同的速度滾動，模擬它們之間的距離。Moon Patrol 經常因普及視差滾動而受到讚譽。叢林之王 (1982)，後來被稱為叢林狩獵，也有視差滾動，並在1982年6月的月球巡邏一個月後發布。

視差滾動的方法街機系統板、影片遊戲控制台和個人電腦系統的標題中使用了四種主要的視差滾動方法。

層法

一些顯示系統支持多個背景層，可以在水平和垂直方向上獨立滾動並相互合成，模擬多平面相機。在這樣的顯示系統上，遊戲可以通過簡單地將每一層的位置在同一方向上改變不同的量來產生視差。移動得更快的層被認為離虛擬相機更近。層可以放置在遊戲場的前面——包含玩家與之互動的對象的層——出於各種原因，例如提供更大的維度、模糊遊戲的某些動作或分散玩家的注意力。

精靈方法

程式設計師還可以製作精靈的偽層——由硬體在層之上或之後繪製的單獨可控的移動對象——如果它們在顯示系統上可用的話。例如，NES的俯視垂直滾動射擊遊戲 Star Force 將其用於其星空，而 Super NES 的 Final Fight 將這種技術用於緊鄰主操場前面的圖層。

Amiga電腦的精靈可以有任何高度，並且可以與銅協處理器水平設置，這使得它們非常適合此目的。

Amiga 上的 Risky Woods 使用與銅多路復用的精靈來建立整個全屏視差背景層，作為系統雙場模式的替代方案。

重複圖案/動畫方法

通過對各個圖塊位圖進行動畫處理，可以使由單個圖塊構成的滾動顯示「浮動」在重複的背景層上，以描繪視差效果。顏色循環可用於在整個螢幕上快速為圖塊設置動畫。這種軟體效果給人以另一個（硬體）層的錯覺。許多遊戲將這種技術用於滾動星域，但有時會實現更複雜或多方向的效果，例如在 Sensible Software 的遊戲 Parallax 中。

光柵法

在光柵圖形中，圖像中的像素線通常按從上到下的順序進行合成和刷新，在繪製一條線和繪製下一條線之間會有輕微的延遲（稱為水平消隱間隔）。為較舊的圖形晶片組設計的遊戲（例如第三代和第四代影片遊戲機的遊戲、專用電視遊戲的遊戲或類似手持系統的遊戲）利用光柵特性來創建更多層的錯覺。

一些顯示系統只有一層。其中包括大多數經典的 8 位系統（例如 Commodore 64、Nintendo Entertainment System、Sega Master System、PC Engine/TurboGrafx-16 和原版 Game Boy）。此類系統上的更複雜的遊戲通常將圖層劃分為水平條，每個條具有不同的位置和滾動速度。通常，螢幕上較高的條帶表示距離虛擬相機較遠的事物，或者一條條帶將保持靜止以顯示狀態信息。然後程序將等待水平空白並在顯示系統開始繪製每條掃描線之前更改圖層的滾動位置。這稱為光柵效果，對於更改系統調色板以提供漸變背景也很有用。

一些平台（例如 Commodore 64、Amiga、Sega Master System、PC Engine/TurboGrafx-16、Sega Mega Drive/Genesis、Super NES、Game Boy、Game Boy Advance 和 Nintendo DS）提供水平空白中斷來自動設置寄存器獨立於程序的其餘部分。其他的，比如NES，需要使用周期定時程式碼，它是專門編寫的，它的執行時間與影片晶片繪製一條掃描線所用的時間一樣長，或者遊戲卡帶內的定時器在給定次數後產生中斷。已繪製掃描線。許多 NES 遊戲使用這種技術來繪製它們的狀態欄，而《忍者神龜 II：街機遊戲》和《Vice：NES 的末日計劃》使用它以不同的速率滾動背景層。

更高級的光柵技術可以產生有趣的效果。如果將圖層與柵格相結合，系統可以實現非常有效的景深；Sonic the Hedgehog、Sonic The Hedgehog 2、ActRaiser、Lionheart、Kid Chaos 和 Street Fighter II 都很好地使用了這個效果。如果每條掃描線都有自己的圖層，則會產生 Pole Position 效果，從而在 2D 系統上建立偽 3D 道路（或 NBA Jam 中的偽 3D 球場）。

如果顯示系統除了滾動之外還支持旋轉和縮放（一種通常稱為模式 7 的效果），則更改旋轉和縮放因子可以繪製平面投影（如在 F-Zero 和超級馬里奧賽車中）或可以扭曲運動場創造一個額外的挑戰因素。

另一種先進的技術是行/列滾動，螢幕上的瓦片的行/列可以單獨滾動。自 Sega Space Harrier 和 System 16、Sega Mega Drive/Genesis 控制台和 Capcom CP System、Irem M-92 和 Taito F3 System 街機遊戲板以來，該技術已在各種 Sega 街機系統板的圖形晶片中實施。

例子

在下面的動畫中，三層以不同的速度向左移動。它們的速度從前向後遞減，並對應於與觀察者的相對距離增加。地面層的移動速度是植被層的 8 倍。植被層的移動速度是雲層的兩倍。

視差滾動

雲層 - 返回

植被層 - 中間

地層 - 前面

動畫

網頁設計中的視差滾動 Web 開發人員 Glutnix 在 2007 年的部落格文章中建立並分享了瀏覽器中視差滾動的首批實現之一，其中包括示例程式碼和使用 JavaScript 和 CSS 2 的演示，支持 Internet Explorer 6 和那個時代的其他瀏覽器。然而，直到 2011 年 HTML5 和 CSS 3 程式碼的引入，該技術才在 Web 設計師中流行起來。擁護者認為這是一種擁抱網路流動性的簡單方法。支持者使用視差背景作為更好地吸引用戶並改善網站提供的整體體驗的工具。然而，美國普渡大學 2013 年發表的一項研究揭示了以下發現：……雖然視差滾動增強了用戶體驗的某些方面，但它並不一定會改善整體用戶體驗。