利用CSS固定背景交替實現視差滾動效果

NewImage

視差滾動效果的網頁設計案例我們分享過很多,實現這個功能一般都需要JS,而且比較複雜。沒關係,今天向大家介紹另外一種簡單的視差效果技術,只需要CSS就能實現。

演示

該滾動效果特點是使用固定背景與色塊內容交替,當訪客向下滾動時,背景是fixed固定的,具體請查看

:http://codyhouse.co/demo/alternate-fixed-scroll-background/index.html

NewImage

從上圖可以看出,內容向上滾動時,第一張背景是固定的,不會跟著向上滾動。即:固定背景+ 色塊內容+ 固定背景+ 色塊內容…這樣的交替方式,從而產生視差效果。

HTML代碼

HTML代碼結構很清晰,使用main標籤包住所有內容,其中.cd-fixed-bg樣式就是固定背景,.cd-scroll-bg樣式為色塊內容。


 

<main>
 <div class="cd-fixed-bg cd-bg-1">
 <h1>標題</h1>
 </div> 
 
 <div class="cd-scrolling-bg cd-color-1">
 <div class="cd-container">
 <p>
 内容...
 </p>
 </div>
 </div>
 
 <div class="cd-fixed-bg cd-bg-2">
 <h1>標題</h1>
 </div> 
 
 <div class="cd-scrolling-bg cd-color-2">
 <div class="cd-container">
 <p>
 内容...
 </p>
 </div>
 </div>
</main>

CSS樣式

主要是通過css的background-attachment:fixed定位屬性來讓背景固定,具體請看下面的樣式代碼:
body, html, main {
 /* important */
 height: 100%;
}
 
.cd-fixed-bg {
 min-height: 100%;
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: center center;
}
 
.cd-fixed-bg.cd-bg-1 {
 background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
 background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
 background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
 background-image: url("../img/cd-background-4.jpg");
}
 
.cd-scrolling-bg {
 min-height: 100%;
}

其餘的.cd-scrolling-bg.cd-color-1 2可自行設定顏色.cd-container則是設定自己的需求

就此介紹完這個固定背景滾動效果,喜歡的可以動手試一試,或許在你的下一個網頁設計項目上嘗試使用。

下載網址:http://codyhouse.co/redirect/?resource=alternate-fixed-scroll-backgrounds

希望這篇有讓你學習到東西喔!

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s