無需 JavaScript 實現的自動滾動視差效果

這篇文章介紹了一種通過CSS3實現的視差（Parallax）效果，這個效果通過在一個元素上疊加多個背景圖片，並使用-webkit- transition-屬性來實現。

這個效果是仿照Chirs Coyier的視差教程實現的，經過Chirs的允許使用了其中的星空背景。

運行效果：

在這裡觀看：http://www.fofronline.com/experiments/parallax/#experiment

該 效果可以在Safari 4 Beta和Google Chrome中正常預覽，實現該效果無需JavaScript。
（但是在IE7及以下版本 中無法觀看）

實現方法：

這個頁面的HTML代碼非常 簡單，通過一個div來定義背景，另一個div來定義內容，這裡使用了CSS3中的多重背景技術，所以需要另外的標記來表示其它的背景圖片。

將CSS背景容器設置在一個固定的位置，並通過top、left、bottom和righ屬性讓它佔據頁面的底部。背景圖片通過 background屬性來指定，最先指定的就是最頂層的背景。每一幅圖片都按照百分比進行定位，而且它們的位置各不相同，這樣當容器的尺寸改變的時候， 各個圖像就會發生移動，從而產生視差效果

按 照通常的想法，只有當頁面被縮放的時候，或使用JavaScript來控制的時候才能產生動畫效果。這裡使用另外一種方法。通過讓背景圖容器的左邊沿進行 移動（比如從0px到100px）。這就會使容器的整體寬度變化，從而使背景圖片根據它們的百分比發生不同程度的移動。通過將時間長度和左側位置設置的足 夠大，就會產生連續的視差移動效果。

可以將移動速度增大來獲得更有趣的效果，另外還可以添加一些鼠標動做，最終的CSS代碼如下：

小資料：視差效果，原本是一個天文學術語，當我們觀察星空時，離我們遠的星星移動速度較慢，離我們近的星星移動速度則較快。當我們坐在車上向車窗外 看時，也會有這樣的感覺，遠處的群山似乎沒有在動，而近處的稻田卻在飛速掠過。許多遊戲中都使用視差效果來增加場景的立體感。