欧美精品一区二区三区一线天视频,亚洲欧美中文另类,一区二区三区视频免费

干貨+教程：創建交互式移動背景

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

這個插件叫做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

<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持續時間，例如“100 ms”或“2.5s”。默認值是100 ms。
Contain：如果你設置的scale數據高于1，那么在此處如果值為true將防止擴大對象/背景溢出容器，值為false時，擴展內容就會溢出。默認值為true。
wrapContent：該選項讓你選擇是否在容器里面的所有元素都跟隨光標的移動而移動，或者只是單純的背景有效應。值為true時所有元素都響應該函數。默認值是false。

3、高級功能

響應式背景

想要讓這個插件得到最高的利用，那么就用下面這段額外的代碼來創建一個響應式互動背景吧！以下代碼將調整你的瀏覽器寬度和高度，添加并調用之：

$(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與加速計

使用該插件的好處是你不必親手做任何事情。插件會自動檢測應用加速計的效果而不是傳統的鼠標事件。可以試試在你的智能手機上看看演示。

結語

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

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

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

第一波無限制高清大圖站點：
《免費高清！10個無版權限制的大圖特供網站》

第一波無限制高清大圖站點：
《免費高清第二波！12個無版權限制的大圖特供網站》

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