第一步是考慮靜態(tài)實(shí)現(xiàn)。整個(gè)頁(yè)面分成幾大塊，比如：

<div class="section" id="topic-a"></div>

<div class="section" id="topic-b"></div>

<div class="section" id="topic-c"></div>

?

每個(gè)div.section有個(gè)背景圖，同時(shí)根據(jù)設(shè)計(jì)需要嵌套多個(gè)背景圖層，就像：

<div class="section" id="topic-a">

???<div class="content">這里放內(nèi)容</div>?

???<div class="bg1"></div>

???<div class="bg2"></div>

</div>

nike那個(gè)只有一個(gè)和section的背景組合。renren是多個(gè)。每個(gè)內(nèi)嵌的背景圖層的background-attachment一定要設(shè)為fixed。這樣基本效果就出來(lái)了。

?

我認(rèn)為nike那個(gè)比renren好的在于，每個(gè)div.section的背景的background-attachment有的也設(shè)為fixed（要設(shè)計(jì)一個(gè)更大的背景圖），這樣配合后面javascript營(yíng)造出的前景、背景不同移動(dòng)速率的效果會(huì)更有動(dòng)感。

?

第二步做出更動(dòng)感的效果，這就要靠javascript了。基本原理就是滾動(dòng)時(shí)調(diào)整嵌套背景圖層的background-position的y軸值。難點(diǎn)在于節(jié)奏感要對(duì)。renren的應(yīng)該是綁在mousewheel事件上，利用返回的值，調(diào)整背景圖的y值。我更喜歡nike的做法，它是綁在onscroll事件上，不用引額外的mousewheel插件，判斷當(dāng)前div.section的offset，調(diào)整背景圖的y值，通過(guò)調(diào)整計(jì)算公式，可以讓這種快慢的感覺(jué)更強(qiáng)一些。

?

?

原理其實(shí)挺簡(jiǎn)單。關(guān)鍵要把這種感覺(jué)做出來(lái)，里面的細(xì)節(jié)還是很多的。另外，應(yīng)該把background-size也加上，這樣改變窗口大小時(shí)更完美。

轉(zhuǎn)載于:https://www.cnblogs.com/jitai/archive/2012/05/14/2499492.html

總結(jié)

以上是生活随笔為你收集整理的人人网 6.0 版申请页面随着滚动条拖动背景图片滚动出现，具体使用 JavaScript 和 CSS 原理是什么？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。