V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lin
V2EX  ›  JavaScript

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

  •  
  •   lin · 2014-11-23 16:35:51 +08:00 · 4152 次点击
    这是一个创建于 3636 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.chanel.com/en_US/fashion.html

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

    谢谢!
    17 条回复    2014-11-23 23:10:42 +08:00
    Yokira
        1
    Yokira  
       2014-11-23 16:40:00 +08:00
    我猜是根据鼠标相对于浏览器窗口的位置,来调整后面背景的位置。
    lamCJ
        2
    lamCJ  
       2014-11-23 17:06:26 +08:00
    有点像,处于放大镜模式
    icedx
        3
    icedx  
       2014-11-23 17:09:36 +08:00
    基本上是 https://github.com/404 的变种
    Sharuru
        4
    Sharuru  
       2014-11-23 17:10:23 +08:00
    以鼠标为焦点的视差?
    sd4399340
        5
    sd4399340  
       2014-11-23 18:01:59 +08:00
    wc0517
        6
    wc0517  
       2014-11-23 18:05:43 +08:00
    CSS做的吧。
    kmvan
        7
    kmvan  
       2014-11-23 18:31:19 +08:00
    你们打开lz能url后,cpu不会100%吗?我风扇立马像飞机起飞的声音,呜呜呜呜~~
    crs0910
        8
    crs0910  
       2014-11-23 19:02:23 +08:00
    你们觉得这种交互好吗?不顾鼠标的操作习惯,这样算是拟物(模拟眼睛)的操作方法吗?把鼠标操作变成眼睛的视角。如果只是用在背景的话还不错,用在整个页面的内容上我就接受不了。每次鼠标移出浏览器边缘都很难受。
    crs0910
        9
    crs0910  
       2014-11-23 19:10:01 +08:00
    另外,实现的话应该是算 mousemove之后的点与中心点 X、Y轴的差,然后用 css3 动画来偏移整个最外层的 div。
    kslr
        10
    kslr  
       2014-11-23 19:41:26 +08:00
    里面的视频音乐挺棒的
    jox
        11
    jox  
       2014-11-23 19:49:00 +08:00
    这个跟iOS的scrollview差不多,修改content wrapper的位置应该就可以了。
    wc0517
        12
    wc0517  
       2014-11-23 20:10:15 +08:00
    @crs0910 我也觉得不舒服
    njutree
        13
    njutree  
       2014-11-23 20:27:22 +08:00
    基本审查下网页就知道怎么实现的了,根据鼠标位置用translate3d 调整背景位置
    pysama
        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的移动有缓冲的过渡效果
    iEverX
        15
    iEverX  
       2014-11-23 22:58:34 +08:00
    @crs0910
    如果能找到一个适用的场合,效果还是挺赞的。这个网页上,确实看不出有什么需要这种技术的地方
    regmach
        16
    regmach  
       2014-11-23 23:04:00 +08:00
    丑到不能忍...
    crs0910
        17
    crs0910  
       2014-11-23 23:10:42 +08:00
    @iEverX 是的,问题就在于把平时浏览整个网站的操作习惯硬生生套用在这个效果上了。导致鼠标操作让人感觉很别扭不舒服。鼠标君表示压力太大了,明明平时想往哪甩就往哪甩,最多滚一滚轮。。

    简单点说就是不习惯了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1466 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:54 · PVG 07:54 · LAX 15:54 · JFK 18:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.