視差滾動效果近年來很受大家的歡迎,但實現這個功能一般都需要javaScript,而且實現做起來有一定的難度。就這個問題,我們跟大家分享另外一種比較簡單的視差滾動效果技術,只需要CSS就可以實現了。一起來看看吧。
演示
該滾動效果特點是使用固定背景與色塊內容交替,當訪客向下滾動時,背景是fixed固定的,具體請查看:在線演示
從上圖可以看出,內容向上滾動時,第一張背景是固定的,不會跟著向上滾動。即:固定背景 + 色塊內容 + 固定背景 + 色塊內容…這樣的交替方式,從而產生視差效果。
兼容性
IE9+
Firefox
Chrome
Safari
Opera
使用教程
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%;
}
本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司!
文章題目:利用CSS固定背景交替實現視差滾動效果
標題網址:http://m.newbst.com/news5/318805.html
成都網站建設公司_創新互聯,為您提供品牌網站制作、服務器托管、用戶體驗、網站制作、響應式網站、網站建設
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯