推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
lin

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

  •  
  •   lin · Nov 23, 2014 · 5345 views
    This topic created in 4362 days ago, the information mentioned may be changed or developed.
    http://www.chanel.com/en_US/fashion.html

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

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

    简单点说就是不习惯了。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5005 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 64ms · UTC 06:55 · PVG 14:55 · LAX 22:55 · JFK 01:55
    ♥ Do have faith in what you're doing.