文章專區

網頁設計相關文章

用CSS表現最簡單的視差滾動

什麼是視差滾動呢?其實就是當使用者滾動滑鼠滾輪(捲軸)時,將多層背景以不同速度移動,形成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還長,否則向下滾動時就會露餡了! 

以上範例便是最基本的視差滾動,很適合想嘗試看看的新手唷!