視差滾動(dòng)效果近年來(lái)很受大家的歡迎，但實(shí)現(xiàn)這個(gè)功能一般都需要javaScript，而且實(shí)現(xiàn)做起來(lái)有一定的難度。就這個(gè)問(wèn)題，我們跟大家分享另外一種比較簡(jiǎn)單的視差滾動(dòng)效果技術(shù)，只需要CSS就可以實(shí)現(xiàn)了。一起來(lái)看看吧。

演示

該滾動(dòng)效果特點(diǎn)是使用固定背景與色塊內(nèi)容交替，當(dāng)訪客向下滾動(dòng)時(shí)，背景是fixed固定的，具體請(qǐng)查看：在線演示

從上圖可以看出，內(nèi)容向上滾動(dòng)時(shí)，第一張背景是固定的，不會(huì)跟著向上滾動(dòng)。即：固定背景 + 色塊內(nèi)容 + 固定背景 + 色塊內(nèi)容…這樣的交替方式，從而產(chǎn)生視差效果。

兼容性

IE9+ Firefox Chrome Safari Opera 使用教程

HTML代碼

HTML代碼結(jié)構(gòu)很清晰，使用main標(biāo)簽包住所有內(nèi)容，其中.cd-fixed-bg樣式就是固定背景，.cd-scroll-bg樣式為色塊內(nèi)容。

<main> <div class="cd-fixed-bg cd-bg-1"> <h1>標(biāo)題</h1> </div>

<div class="cd-scrolling-bg cd-color-1"> <div class="cd-container"> <p> 內(nèi)容... </p> </div> </div>

<div class="cd-fixed-bg cd-bg-2"> <h1>標(biāo)題</h1> </div>

<div class="cd-scrolling-bg cd-color-2"> <div class="cd-container"> <p> 內(nèi)容... </p> </div> </div> </main> CSS樣式 主要是通過(guò)css的background-attachment:fixed定位屬性來(lái)讓背景固定，具體請(qǐng)看下面的樣式代碼：

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%; }

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

文章題目：利用CSS固定背景交替實(shí)現(xiàn)視差滾動(dòng)效果
標(biāo)題網(wǎng)址：http://www.aaarwkj.com/news5/318805.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、服務(wù)器托管、用戶(hù)體驗(yàn)、網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)