创建交互式移动背景

时间：2014-11-11

创建交互式移动背景 sanl

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

　　这个插件叫做Interactive BG (Background)，让你创建一个页面背景相对于光标移动而移动的视差效果。由于在移动端没有鼠标移动事件，所以这个插件利用加速计，而不是为ios和android专门创建视差效果。

　　该插件适用于Chrome,Firefox,Safari，IE还没测试过。

Create an Interactive Moving Background/Object that Reacts to Viewer's Cursor

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

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

　　结语

　　这个插件的好用与否，谁用谁知道~

上一篇：25个色彩十分高档的网站设计欣赏 下一篇：聊聊IPHONE6分辨率与适配

创建交互式移动背景

相关文章

最新文章