V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
This topic created in 4174 days ago, the information mentioned may be changed or developed.
 |
1
yizi Nov 23, 2014
我猜是根据鼠标相对于浏览器窗口的位置，来调整后面背景的位置。
|
 |
2
lamCJ Nov 23, 2014
有点像，处于放大镜模式
|
 |
3
icedx Nov 23, 2014
基本上是 https://github.com/404 的变种
|
 |
4
Sharuru Nov 23, 2014
以鼠标为焦点的视差？
|
 |
5
sd4399340 Nov 23, 2014
|
 |
6
wc0517 Nov 23, 2014
CSS做的吧。
|
 |
7
kmvan Nov 23, 2014
你们打开lz能url后，cpu不会100%吗？我风扇立马像飞机起飞的声音，呜呜呜呜～～
|
 |
8
crs0910 Nov 23, 2014
你们觉得这种交互好吗？不顾鼠标的操作习惯，这样算是拟物（模拟眼睛）的操作方法吗？把鼠标操作变成眼睛的视角。如果只是用在背景的话还不错，用在整个页面的内容上我就接受不了。每次鼠标移出浏览器边缘都很难受。
|
|
9
crs0910 Nov 23, 2014
另外，实现的话应该是算 mousemove之后的点与中心点 X、Y轴的差，然后用 css3 动画来偏移整个最外层的 div。
|
 |
10
kslr Nov 23, 2014
里面的视频音乐挺棒的
|
 |
11
jox Nov 23, 2014
这个跟iOS的scrollview差不多，修改content wrapper的位置应该就可以了。
|
 |
13
njutree Nov 23, 2014
基本审查下网页就知道怎么实现的了，根据鼠标位置用translate3d 调整背景位置
|
 |
14
pysama Nov 23, 2014
1. 结构层：
div#wrapper div#contentBox wrapper的宽高和浏览器窗口完全相同 contentBox是宽高是真实内容层的大小 2. 行为层： 监听mousemove事件，根据鼠标的座标来实时改变contentBox层的x和y轴的偏移值 3. 样式层： 建议使用css3的translate3d()方法来改变contentBox层的偏移值 对contentBox设置css3的transition，可以设置各种缓动效果（ease-in，ease-out等），让contengBox的移动有缓冲的过渡效果 |
 |
16
regmach Nov 23, 2014
丑到不能忍...
|
Select Language