请问这种效果是怎么实现的? - V2EX
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 4490 次点击
    这是一个创建于 3980 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.chanel.com/en_US/fashion.html

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

    谢谢!
    17 条回复    2014-11-23 23:10:42 +08:00
    yizi
        1
    yizi  
       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 &bsp;
       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     Solana     5266 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 36ms UTC 09:11 PVG 17:11 LAX 02:11 JFK 05:11
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86