視差滾動快速入門!我們用CSS來實現吧!

0
65

相信很多讀者,也覺得視差滾動的網頁很酷吧!常常會讓人不斷的往上又往下的滾哈~

這邊我會簡單的教大家,只單純用CSS實現簡單的視差滾動,篇幅不多,很適合入門。

有興趣的可以先從這篇開始,很有趣的,且容易入手,我們一起來看看吧!

首先先來看一下DEMO:點我來看看

 

實現原理:

利用background-attachment屬性實現。

background-attachment:fixed || 滾動|| 本地

默認情況下,此屬性取值scroll,頁面滾動時,內容和背景一起運動,如果取值fixed,背景相對瀏覽器固定。

那此時就只有上方文字滾動,所以就會形成簡單的視差效果。

 

代碼實現:

這邊拆Html / CSS,分別為各位簡單解說一下,

Html:這邊我們把區塊拆成3塊,等下會有3塊做視差滾動。

<div class="article section1">  
     每当我加班凌晨,独自一人走在黑暗的回家路上  
</div>  
<div class="article section2">  
     我会想起那天夕阳下的奔跑  
</div>  
<div class="article section3">  
     那是我逝去的,青春  
</div>

CSS:

/*統一設置背景的background-attchment屬性*/  
.article{  
    width: 960px;  
    margin: 0 auto;  
    height: 800px;  
    padding: 40px;  
    font: 24px/1.5 'Microsoft YaHei';  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    background-position: center center;  
    background-size: cover;  
    line-height:400px;  
}  
/*分別給每個部分設置不同的背景和顏色*/  
.section1{  
       color: white;  
       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);  
}  
.section2{  
       color: #FF8500;  
       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);  
}  
.section3{  
       color: #747474;  
       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);  
}

CSS主要重點在background-attachment : fixed,這一句CSS把div的背景圖都鎖定住了,
所以當滑鼠往下滾時,其實背景是不動的,只有上方文字在做滾動,就實現了最簡易的視差滾動了!

 

以上就是簡單的視差滾動實現,很容易吧!希望大家都有把它實現出來!

那之後可能會看狀況出比較進階一點的視差滾動玩法,有興趣也可以一起來腦補一下XD

 

 

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03