请问这种效果是怎么实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3678 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://www.chanel.com/en_US/fashion.html

1. 有没有什么相关术语？（我好去google了解）
2. 有没有开源实现？
3. 这种效果的原理是什么？

谢谢！

开源

术语

原理

17 条回复 • 2014-11-23 23:10:42 +08:00

Yokira

2014-11-23 16:40:00 +08:00

我猜是根据鼠标相对于浏览器窗口的位置，来调整后面背景的位置。

lamCJ

2014-11-23 17:06:26 +08:00

有点像，处于放大镜模式

icedx

2014-11-23 17:09:36 +08:00

基本上是 https://github.com/404 的变种

Sharuru

2014-11-23 17:10:23 +08:00

以鼠标为焦点的视差？

sd4399340

2014-11-23 18:01:59 +08:00

http://matthew.wagerfield.com/parallax/

wc0517

2014-11-23 18:05:43 +08:00

CSS做的吧。

kmvan

2014-11-23 18:31:19 +08:00

你们打开lz能url后，cpu不会100%吗？我风扇立马像飞机起飞的声音，呜呜呜呜～～

crs0910

2014-11-23 19:02:23 +08:00

你们觉得这种交互好吗？不顾鼠标的操作习惯，这样算是拟物（模拟眼睛）的操作方法吗？把鼠标操作变成眼睛的视角。如果只是用在背景的话还不错，用在整个页面的内容上我就接受不了。每次鼠标移出浏览器边缘都很难受。

crs0910

2014-11-23 19:10:01 +08:00

另外，实现的话应该是算 mousemove之后的点与中心点 X、Y轴的差，然后用 css3 动画来偏移整个最外层的 div。

kslr

2014-11-23 19:41:26 +08:00

里面的视频音乐挺棒的

jox

2014-11-23 19:49:00 +08:00

这个跟iOS的scrollview差不多，修改content wrapper的位置应该就可以了。

wc0517

2014-11-23 20:10:15 +08:00

@crs0910 我也觉得不舒服

njutree

2014-11-23 20:27:22 +08:00

基本审查下网页就知道怎么实现的了，根据鼠标位置用translate3d 调整背景位置

pysama

2014-11-23 22:23:38 +08:00

1. 结构层：
div#wrapper
div#contentBox

wrapper的宽高和浏览器窗口完全相同
contentBox是宽高是真实内容层的大小

2. 行为层：
监听mousemove事件，根据鼠标的座标来实时改变contentBox层的x和y轴的偏移值

3. 样式层：
建议使用css3的translate3d()方法来改变contentBox层的偏移值
对contentBox设置css3的transition，可以设置各种缓动效果（ease-in，ease-out等），让contengBox的移动有缓冲的过渡效果

iEverX

2014-11-23 22:58:34 +08:00

@crs0910
如果能找到一个适用的场合，效果还是挺赞的。这个网页上，确实看不出有什么需要这种技术的地方

regmach

2014-11-23 23:04:00 +08:00

丑到不能忍...

crs0910

2014-11-23 23:10:42 +08:00

@iEverX 是的，问题就在于把平时浏览整个网站的操作习惯硬生生套用在这个效果上了。导致鼠标操作让人感觉很别扭不舒服。鼠标君表示压力太大了，明明平时想往哪甩就往哪甩，最多滚一滚轮。。

简单点说就是不习惯了。