Travel
Travel
Travel
文章專區
什麼是視差滾動呢?其實就是當使用者滾動滑鼠滾輪(捲軸)時,將多層背景以不同速度移動,形成3D的垂直運動效果,造成視覺上的錯覺並增加趣味性。
網路上多的是用CSS搭配JS寫出來的,以下來介紹如何只用CSS表現出最簡單入門的視差滾動。
只要想成背景圖的尺寸必須比包住它的div還大,並且在頁面上須是固定住的,因此在向下滾動時,背景就會固定在原地,但是其上的內容和包住的div卻會隨著滾輪而向上移動,這樣就形成最簡單的視差滾動了。
範例:
Travel
Travel
Travel
Enjoy Your Life
Enjoy Your Life
Enjoy Your Life
Enjoy Your Life
HAVE FUN!
HAVE FUN!
HAVE FUN!
Html
CSS
要注意的是背景圖的高(height)一定要比div還長,否則向下滾動時就會露餡了!
以上範例便是最基本的視差滾動,很適合想嘗試看看的新手唷!