![]() | 1 yizi 2014-11-23 16:40:00 +08:00 我猜是根据鼠标相对于浏览器窗口的位置,来调整后面背景的位置。 |
2 lamCJ 2014-11-23 17:06:26 +08:00 有点像,处于放大镜模式 |
![]() | 3 icedx 2014-11-23 17:09:36 +08:00 基本上是 https://github.com/404 的变种 |
4 Sharuru 2014-11-23 17:10:23 +08:00 以鼠标为焦点的视差? |
![]() | 5 sd4399340 2014-11-23 18:01:59 +08:00 |
6 wc0517 &bsp; 2014-11-23 18:05:43 +08:00 CSS做的吧。 |
![]() | 7 kmvan 2014-11-23 18:31:19 +08:00 你们打开lz能url后,cpu不会100%吗?我风扇立马像飞机起飞的声音,呜呜呜呜~~ |
![]() | 8 crs0910 2014-11-23 19:02:23 +08:00 你们觉得这种交互好吗?不顾鼠标的操作习惯,这样算是拟物(模拟眼睛)的操作方法吗?把鼠标操作变成眼睛的视角。如果只是用在背景的话还不错,用在整个页面的内容上我就接受不了。每次鼠标移出浏览器边缘都很难受。 |
![]() | 9 crs0910 2014-11-23 19:10:01 +08:00 另外,实现的话应该是算 mousemove之后的点与中心点 X、Y轴的差,然后用 css3 动画来偏移整个最外层的 div。 |
10 kslr 2014-11-23 19:41:26 +08:00 里面的视频音乐挺棒的 |
11 jox 2014-11-23 19:49:00 +08:00 这个跟iOS的scrollview差不多,修改content wrapper的位置应该就可以了。 |
![]() | 13 njutree 2014-11-23 20:27:22 +08:00 基本审查下网页就知道怎么实现的了,根据鼠标位置用translate3d 调整背景位置 |
![]() | 14 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的移动有缓冲的过渡效果 |
![]() | 16 regmach 2014-11-23 23:04:00 +08:00 丑到不能忍... |