萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 創建交互式移動背景
創建交互式移動背景
頁面的視差有多種表現形式，最常見的是用戶滾動頁面形成的視差效果。今天的教程是一個插件，實現多種不同的視差效果。
這個插件叫做Interactive BG (Background)，讓你創建一個頁面背景相對於光標移動而移動的視差效果。由於在移動端沒有鼠標移動事件，所以這個插件利用加速計，而不是為ios和android專門創建視差效果。
該插件適用於Chrome,Firefox,Safari，IE還沒測試過。
Interactive BG的使用方法
1、工作原理
圖像作為背景，背景根據光標的位置移動而做出相應的移動。我首先寫了一個讓背景移動的函數，但是我發現在鼠標移動進來的時候畫面會有一粗糙的小動畫，而背景則需要重置。這不是一個好的用戶體驗，最後我決定使用CSS3的變換矩陣，它允許背景自動定點於中心無需我再額外計算。使用矩陣的另一好處是我可以直接使用范圍和坐標而無需過多的數值計算。
在我完成了桌面端的效果後我突然意識到在移動端(哪怕是智能手機也)是沒辦法同樣有效果的，因為移動端沒有鼠標事件。我決定測試JS事件“devicemotion”，這讓我確定加速計的狀態。在一些試驗和錯誤之後，我將accelerationIncludingGravity值轉換為CSS3矩陣轉換裡面的可用數據。
現在你的背景在桌面和移動設備上將會有一個漂亮的視差移動效果。
2、實現方法
首先,確保你已經包括了最新的jQuery庫(最好是2.0.0或更高)，在此有最新版，包括jQuery.interactive_bg.js，可在此獲取，插入到<head>標簽裡面，確保你有一張作為背景的圖片素材，以便在代碼中引用之作為背景。
好了，鋪設標記如下：
HTML
1 2 3 4 5
<body> .. <div data-ibg-bg="bg.jpg"></div> .. </body>
其中，data-ibg-bg鏈接到背景圖片的位置，假設背景圖片的路徑在文件裡面的“background.png”，那麼把上面的屬性改為/background.png。
現在調用函數使背景產生活力。
1 2 3 4 5 6 7
$(".bg").interactive_bg({
strength: 25,
scale: 1.05,
animationSpeed: "100ms",
contain: true,
wrapContent: false
});
解釋一下上面的代碼：
strength：該選項控制背景隨著光標移動而移動的強度。數值越高，強度越大。默認數值為25。
Scale：該選項控制背景縮放的規模。接受正常css范圍值所以1就是原始大小，並且在動畫的開始和結束處都被禁用。選項的默認值是1.05。
animationSpeed(動畫速度)：該選項控制動畫出入口的時間尺度。接受css持續時間，例如“100 ms”或“2.5s”。默認值是100 ms。
Contain：如果你設置的scale數據高於1，那麼在此處如果值為true將防止擴大對象/背景溢出容器，值為false時，擴展內容就會溢出。默認值為true。
wrapContent：該選項讓你選擇是否在容器裡面的所有元素都跟隨光標的移動而移動，或者只是單純的背景有效應。值為true時所有元素都響應該函數。默認值是false。
3、高級功能
響應式背景
想要讓這個插件得到最高的利用，那麼就用下面這段額外的代碼來創建一個響應式互動背景吧!以下代碼將調整你的浏覽器寬度和高度，添加並調用之：
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與加速計
使用該插件的好處是你不必親手做任何事情。插件會自動檢測應用加速計的效果而不是傳統的鼠標事件。可以試試在你的智能手機上看看演示。
結語
這個插件的好用與否，誰用誰知道~
- 上一頁:聊聊IPHONE6分辨率與適配
- 下一頁:25個色彩十分高檔的網站設計欣賞
