頁面視差表現形式多樣，最常見是用戶滾動形成視差。今天介紹一個插件實現多種視差效果——Interactive BG (Background)，創建頁面背景隨光標移動而移動的視差效果。移動端無鼠標事件，插件利用加速計而非為 iOS/Android 專門創建視差。適用 Chrome、Firefox、Safari，IE 未測試。

使用方法

1. 工作原理

圖像作背景，根據光標位置移動做相應移動。最初寫背景移動函數，但發現鼠標移入時畫面有粗糙小動畫、背景需重置，體驗不好。改用 CSS3 變換矩陣，允許背景自動定點於中心無需額外計算。另一好處：可直接使用範圍與座標無需過多數值計算。

完成桌面端後發現移動端(含智能手機)無法同樣有效，因無鼠標事件。測試 JS 事件「devicemotion」確定加速計狀態。經試驗錯誤，將 accelerationIncludingGravity 值轉換為 CSS3 矩陣轉換可用數據。如今背景在桌面與移動設備都有漂亮視差移動效果。

2. 實現步驟

確保包含最新 jQuery 庫(建議 2.0.0+)，引入 jQuery.interactive_bg.js，插入 標籤，準備一張背景圖片素材供代碼引用。

鋪設標記：

<body>
  ..
  <div data-ibg-bg="bg.jpg"></div>
  ..
</body>

data-ibg-bg 連結背景圖片位置。假設路徑為 "background.png"，屬性改為 /background.png。

調用函數激活背景：

$(".bg").interactive_bg({
  strength: 25,
  scale: 1.05,
  animationSpeed: "100ms",
  contain: true,
  wrapContent: false
});

參數解釋：
• strength：背景隨光標移動強度，值越大越強，預設 25。
• scale：背景縮放比例，接受正常 CSS 範圍值，1 為原始大小，動畫開始結束處禁用，預設 1.05。
• animationSpeed：動畫出入口時間尺度，接受 CSS 持續時間如 "100ms"、"2.5s"，預設 100ms。
• contain：scale > 1 時，true 防止擴大溢出容器，false 允許溢出，預設 true。
• wrapContent：true 容器內所有元素跟隨光標移動，false 僅背景生效，預設 false。

3. 進階功能：響應式背景

調整瀏覽器寬高、添加並調用：

$(document).ready(function(){
  $(".bg").interactive_bg();
});
$(window).resize(function() {
  $(".bg > .ibg-bg").css({
    width: $(window).outerWidth(),
    height: $(window).outerHeight()
  })
})

Interactive Background 與加速計

插件自動檢測應用加速計效果而非傳統鼠標事件，無需手動處理。可在智能手機上查看演示。

結語

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