視差滾動是一種流行的網頁設計技術。它通過在滾動時為網頁的不同部分添加不同速度的移動效果,從而創造出視覺層次感和動態效果。而在純粹的CSS視差網站中,則是僅僅使用了CSS技術來實現這個效果,不涉及到任何JavaScript代碼的編寫。
/* 純CSS視差代碼示例 */ .parallax { perspective: 2px; /* 透視角度 */ height: 500px; /* 視口高度 */ overflow-x: hidden; /* 防止橫向滾動條出現 */ overflow-y: auto; /* 豎向滾動 */ } .parallax__layer { position: absolute; /* 絕對定位 */ width: 100%; /* 寬度占滿整個視口 */ height: 100%; /* 高度占滿整個視口 */ top: 0; left: 0; /* 上、左對齊 */ } .parallax__layer--back { transform: translateZ(-1px); /* 向屏幕外移動一點距離 */ } .parallax__layer--base { transform: translateZ(0); /* 不做移動 */ } .parallax__layer--front { transform: translateZ(1px); /* 向屏幕內移動一點距離 */ }
在純CSS視差網站中,需要使用CSS中的透視、絕對定位、transform等屬性來實現視差效果。其中透視屬性可以控制元素的遠近關系,絕對定位可以讓元素獨立出來,而transform屬性則可以控制元素在3D視圖中的移動位置。
純CSS視差網站的優點在于它無需依賴JavaScript,可以在網頁加載時就快速、流暢地呈現視差效果。此外,由于只使用了CSS技術,所以相比較于傳統的JavaScript視差網站,純CSS視差網站的代碼更加輕盈,性能更加優秀。