頁(yè)面的視差有多種表現(xiàn)形式，最常見(jiàn)的是用戶滾動(dòng)頁(yè)面形成的視差效果。今天的教程是一個(gè)插件，實(shí)現(xiàn)多種不同的視差效果。
這個(gè)插件叫做Interactive BG (Background)，讓你創(chuàng)建一個(gè)頁(yè)面背景相對(duì)于光標(biāo)移動(dòng)而移動(dòng)的視差效果。由于在移動(dòng)端沒(méi)有鼠標(biāo)移動(dòng)事件，所以這個(gè)插件利用加速計(jì)，而不是為ios和android專(zhuān)門(mén)創(chuàng)建視差效果。
該插件適用于Chrome,Firefox,Safari，IE還沒(méi)測(cè)試過(guò)。
Interactive BG的使用方法
1、工作原理
圖像作為背景，背景根據(jù)光標(biāo)的位置移動(dòng)而做出相應(yīng)的移動(dòng)。我首先寫(xiě)了一個(gè)讓背景移動(dòng)的函數(shù)，但是我發(fā)現(xiàn)在鼠標(biāo)移動(dòng)進(jìn)來(lái)的時(shí)候畫(huà)面會(huì)有一粗糙的小動(dòng)畫(huà)，而背景則需要重置。這不是一個(gè)好的用戶體驗(yàn)，最后我決定使用CSS3的變換矩陣，它允許背景自動(dòng)定點(diǎn)于中心無(wú)需我再額外計(jì)算。使用矩陣的另一好處是我可以直接使用范圍和坐標(biāo)而無(wú)需過(guò)多的數(shù)值計(jì)算。
在我完成了桌面端的效果后我突然意識(shí)到在移動(dòng)端(哪怕是智能手機(jī)也)是沒(méi)辦法同樣有效果的，因?yàn)橐苿?dòng)端沒(méi)有鼠標(biāo)事件。我決定測(cè)試JS事件“devicemotion”，這讓我確定加速計(jì)的狀態(tài)。在一些試驗(yàn)和錯(cuò)誤之后，我將accelerationIncludingGravity值轉(zhuǎn)換為CSS3矩陣轉(zhuǎn)換里面的可用數(shù)據(jù)。
現(xiàn)在你的背景在桌面和移動(dòng)設(shè)備上將會(huì)有一個(gè)漂亮的視差移動(dòng)效果。
2、實(shí)現(xiàn)方法
首先,確保你已經(jīng)包括了最新的jQuery庫(kù)(最好是2.0.0或更高)，在此有最新版，包括jQuery.interactive_bg.js，可在此獲取，插入到<head>標(biāo)簽里面，確保你有一張作為背景的圖片素材，以便在代碼中引用之作為背景。
好了，鋪設(shè)標(biāo)記如下：
HTML
1 2 3 4 5 |
<body> .. <div data-ibg-bg="bg.jpg"></div> .. </body> |
其中，data-ibg-bg鏈接到背景圖片的位置，假設(shè)背景圖片的路徑在文件里面的“background.png”，那么把上面的屬性改為/background.png。
現(xiàn)在調(diào)用函數(shù)使背景產(chǎn)生活力。
1 2 3 4 5 6 7 |
$(".bg").interactive_bg({
strength: 25,
scale: 1.05,
animationSpeed: "100ms",
contain: true,
wrapContent: false
});
|
解釋一下上面的代碼：
strength：該選項(xiàng)控制背景隨著光標(biāo)移動(dòng)而移動(dòng)的強(qiáng)度。數(shù)值越高，強(qiáng)度越大。默認(rèn)數(shù)值為25。
Scale：該選項(xiàng)控制背景縮放的規(guī)模。接受正常css范圍值所以1就是原始大小，并且在動(dòng)畫(huà)的開(kāi)始和結(jié)束處都被禁用。選項(xiàng)的默認(rèn)值是1.05。
animationSpeed(動(dòng)畫(huà)速度)：該選項(xiàng)控制動(dòng)畫(huà)出入口的時(shí)間尺度。接受css持續(xù)時(shí)間，例如“100 ms”或“2.5s”。默認(rèn)值是100 ms。
Contain：如果你設(shè)置的scale數(shù)據(jù)高于1，那么在此處如果值為true將防止擴(kuò)大對(duì)象/背景溢出容器，值為false時(shí)，擴(kuò)展內(nèi)容就會(huì)溢出。默認(rèn)值為true。
wrapContent：該選項(xiàng)讓你選擇是否在容器里面的所有元素都跟隨光標(biāo)的移動(dòng)而移動(dòng)，或者只是單純的背景有效應(yīng)。值為true時(shí)所有元素都響應(yīng)該函數(shù)。默認(rèn)值是false。
3、高級(jí)功能
響應(yīng)式背景
想要讓這個(gè)插件得到最高的利用，那么就用下面這段額外的代碼來(lái)創(chuàng)建一個(gè)響應(yīng)式互動(dòng)背景吧!以下代碼將調(diào)整你的瀏覽器寬度和高度，添加并調(diào)用之：
JS
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function(){
$(".bg").interactive_bg(); // function call
});
// change background size on window resize
$(window).resize(function() {
$(".bg > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
|
Interactive Background與加速計(jì)
使用該插件的好處是你不必親手做任何事情。插件會(huì)自動(dòng)檢測(cè)應(yīng)用加速計(jì)的效果而不是傳統(tǒng)的鼠標(biāo)事件?？梢栽囋囋谀愕闹悄苁謾C(jī)上看看演示。
結(jié)語(yǔ)
這個(gè)插件的好用與否，誰(shuí)用誰(shuí)知道~