首頁 > web前端 > css教學 > 不透過JavaScript實現的自動滾動視差效果_經驗交流

不透過JavaScript實現的自動滾動視差效果_經驗交流

WBOY
發布: 2016-05-16 12:03:59
原創
1800 人瀏覽過

這個效果是仿照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程式碼如下:

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板