javascript
人人网 6.0 版申请页面随着滚动条拖动背景图片滚动出现,具体使用 JavaScript 和 CSS 原理是什么?...
第一步是考慮靜態(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)題。
- 上一篇: 最近任务-2012.05.14
- 下一篇: 求【javascript设计模式】【高性