干貨+教程：創(chuàng)建交互式移動背景

頁面的視差有多種表現(xiàn)形式，最常見的是用戶滾動頁面形成的視差效果。今天的教程是一個插件，實現(xiàn)多種不同的視差效果。

這個插件叫做Interactive BG (Background)，讓你創(chuàng)建一個頁面背景相對于光標(biāo)移動而移動的視差效果。由于在移動端沒有鼠標(biāo)移動事件，所以這個插件利用加速計，而不是為ios和android專門創(chuàng)建視差效果。

該插件適用于Chrome,Firefox,Safari，IE還沒測試過。

干貨+教程：創(chuàng)建交互式移動背景

點擊此處觀看效果演示

點擊此處下載效果包

Interactive BG的使用方法

1、工作原理

圖像作為背景，背景根據(jù)光標(biāo)的位置移動而做出相應(yīng)的移動。我首先寫了一個讓背景移動的函數(shù)，但是我發(fā)現(xiàn)在鼠標(biāo)移動進(jìn)來的時候畫面會有一粗糙的小動畫，而背景則需要重置。這不是一個好的用戶體驗，最后我決定使用CSS3的變換矩陣，它允許背景自動定點于中心無需我再額外計算。使用矩陣的另一好處是我可以直接使用范圍和坐標(biāo)而無需過多的數(shù)值計算。

在我完成了桌面端的效果后我突然意識到在移動端（哪怕是智能手機(jī)也）是沒辦法同樣有效果的，因為移動端沒有鼠標(biāo)事件。我決定測試JS事件“devicemotion”，這讓我確定加速計的狀態(tài)。在一些試驗和錯誤之后，我將accelerationIncludingGravity值轉(zhuǎn)換為CSS3矩陣轉(zhuǎn)換里面的可用數(shù)據(jù)。

現(xiàn)在你的背景在桌面和移動設(shè)備上將會有一個漂亮的視差移動效果。

2、實現(xiàn)方法

首先,確保你已經(jīng)包括了最新的jQuery庫(最好是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：該選項控制背景隨著光標(biāo)移動而移動的強(qiáng)度。數(shù)值越高，強(qiáng)度越大。默認(rèn)數(shù)值為25。
  • Scale：該選項控制背景縮放的規(guī)模。接受正常css范圍值所以1就是原始大小，并且在動畫的開始和結(jié)束處都被禁用。選項的默認(rèn)值是1.05。
  • animationSpeed(動畫速度)：該選項控制動畫出入口的時間尺度。接受css持續(xù)時間，例如“100 ms”或“2.5s”。默認(rèn)值是100 ms。
  • Contain：如果你設(shè)置的scale數(shù)據(jù)高于1，那么在此處如果值為true將防止擴(kuò)大對象/背景溢出容器，值為false時，擴(kuò)展內(nèi)容就會溢出。默認(rèn)值為true。
  • wrapContent：該選項讓你選擇是否在容器里面的所有元素都跟隨光標(biāo)的移動而移動，或者只是單純的背景有效應(yīng)。值為true時所有元素都響應(yīng)該函數(shù)。默認(rèn)值是false。

3、高級功能

響應(yīng)式背景

想要讓這個插件得到最高的利用，那么就用下面這段額外的代碼來創(chuàng)建一個響應(yī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與加速計

使用該插件的好處是你不必親手做任何事情。插件會自動檢測應(yīng)用加速計的效果而不是傳統(tǒng)的鼠標(biāo)事件?？梢栽囋囋谀愕闹悄苁謾C(jī)上看看演示。

結(jié)語

這個插件的好用與否，誰用誰知道~

新技能Get之后，別忘了挑選好素材！

圖文混拍好教程：
《設(shè)計基本功！幫你掌握圖文排版的5個小技巧》

第一波無限制高清大圖站點：
《免費高清！10個無版權(quán)限制的大圖特供網(wǎng)站》

第一波無限制高清大圖站點：
《免費高清第二波！12個無版權(quán)限制的大圖特供網(wǎng)站》

原文地址：onextrapixel
優(yōu)設(shè)網(wǎng)翻譯：@寫說說
uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量77萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：

干貨+教程：創(chuàng)建交互式移動背景

程遠(yuǎn)鐵粉

文章 6813 人氣 30953.5w

優(yōu)設(shè) 內(nèi)容總監(jiān)
收藏 2
點贊

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。

繼續(xù)閱讀本文相關(guān)話題

文章目錄