优界网

首页 > 教程经验 > 干货+教程:创建交互式移动背景

干货+教程:创建交互式移动背景

74

0

0

2015-04-23 16:22:45

萤火

分享一下,又不会怀孕!

本作品为转载作品,版权为作品原作者所有,感谢上传者的分享!

interactive-background-1

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

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

1
2
3
4
5
<body>
??..
??<div data-ibg-bg="bg.jpg"></div>
  ..
</body>

已有0人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

  • 刚刚
  • 登录优界网 ×