浅谈如何制作交互式风格的移动背景

【 tulaoshi.com - 平面设计 】

页面的视差有多种表现形式，最常见的是用户滚动页面形成的视差效果。今天的教程是一个插件，实现多种不同的视差效果。

这个插件叫做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

12345

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

其中，data-ibg-bg链接到背景图片的位置，假设背景图片的路径在文件里面的background.png，那么把上面的属性改为/background.png。

现在调用函数使背景产生活力。

1234567

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

解释一下上面的代码：

3、高级功能

响应式背景

想要让这个插件得到最高的利用，那么就用下面这段额外的代码来创建一个响应式互动背景吧！以下代码将调整你的浏览器宽度和高度，添加并调用之：

JS

12345678910

$(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与加速计

使用该插件的好处是你不必亲手做任何事情。插件会自动检测应用加速计的效果而不是传统的鼠标事件。可以试试在你的智能手机上看看演示。