V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
halfer53
V2EX  ›  分享发现

qq 浏览器 8 的滚动视差, 简直美得令人醉了

  •  2
     
  •   halfer53 · 2014-09-21 18:51:53 +08:00 · 8768 次点击
    这是一个创建于 3714 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://browser.qq.com/

    实在太美了

    看了一下源码, 主要是用了transform, translate, 和rotate属性, 以及velocity.js. 看得出设计的很巧妙, 给设计师点个赞
    62 条回复    2014-09-27 16:27:48 +08:00
    rock_cloud
        1
    rock_cloud  
       2014-09-21 18:53:40 +08:00
    感觉中间slogan的字体好别扭。。。
    shuax
        2
    shuax  
       2014-09-21 18:58:40 +08:00   ❤️ 14
    搞笑的是QQ浏览器自己看不见这些效果。
    yqw
        3
    yqw  
       2014-09-21 18:59:58 +08:00
    确实很赞
    icyflash
        4
    icyflash  
       2014-09-21 19:02:16 +08:00   ❤️ 2
    @shuax QQ浏览器只有皮,没有核,如果看不见,说明你IE版本低了
    shuax
        5
    shuax  
       2014-09-21 19:05:02 +08:00
    @icyflash 我知道它没核,我的IE11正常,但是他的官方说明里面写了一个:自带IE高级内核……
    mongodb
        6
    mongodb  
       2014-09-21 19:08:24 +08:00
    为什么我的firefox看着就是个静态页面没有任何滚动视差效果。。
    ytf4425
        7
    ytf4425  
       2014-09-21 19:12:44 +08:00
    firefox、chrome表示只能看到一个静态页
    linux没IE
    sdzbzyc
        8
    sdzbzyc  
       2014-09-21 19:15:37 +08:00
    为什么感觉好卡..
    missdeer
        9
    missdeer  
       2014-09-21 19:16:12 +08:00
    好吧,原来现在腾讯还在做IE only的网页
    zhs227
        10
    zhs227  
       2014-09-21 19:18:33 +08:00
    效果确实很炫
    滚动一下,左上角显着QQ浏览器8, 右下角显着QQ浏览器7.也可能是故意留着的。
    Marcos
        11
    Marcos  
       2014-09-21 19:19:13 +08:00
    可以看得出来配色模仿iOS7/8的高饱和度设计。。。
    chaker
        12
    chaker  
       2014-09-21 19:19:37 +08:00   ❤️ 1
    这字体让我想起来以前word里的艺术字
    kmvan
        13
    kmvan  
       2014-09-21 19:24:33 +08:00 via Android
    手机上看简直逗
    halfer53
        14
    halfer53  
    OP
       2014-09-21 19:26:59 +08:00
    @mongodb
    @ytf4425

    简单看了一下, firefox不支持animation: orbloop. 视觉差的插件是腾讯自己写的, 估计开发的时候就没考虑firefox的兼容性 ,估计transform也是如此 (╯□╰)o.

    这个网页只支持ie10+
    belin520
        15
    belin520  
       2014-09-21 19:28:21 +08:00
    @sdzbzyc +1,为什么感觉好卡!
    belin520
        16
    belin520  
       2014-09-21 19:28:46 +08:00
    http://www.pomodrone.com/
    我比较喜欢这个
    halfer53
        17
    halfer53  
    OP
       2014-09-21 19:31:59 +08:00
    不过话又说回来, 既然只支持ie10+, 干嘛不直接用 jquery 2. 看到1.11我还以为支持ie6那
    chenji
        18
    chenji  
       2014-09-21 20:00:31 +08:00   ❤️ 3
    估计设计师是这么想的:你们一帮用Firefox的货让你们来用QQ浏览器太难了,我只需要从IE立面分走一拨人就足够了。

    所以,Firefox用户不考虑。
    deepurple
        19
    deepurple  
       2014-09-21 20:00:54 +08:00
    Firefox表示就是个静态页面.....
    fantasticfears
        20
    fantasticfears  
       2014-09-21 20:02:21 +08:00
    @rock_cloud 艺术字飘来飘去。

    这网页很绚丽就是炫技都超过他的作用了
    adjusted
        21
    adjusted  
       2014-09-21 20:34:13 +08:00
    艺术字飘来飘去让我想起了第一次接触ppt制作的时候.
    PotatoBrother
        22
    PotatoBrother  
       2014-09-21 21:08:08 +08:00
    赞啊
    PotatoBrother
        23
    PotatoBrother  
       2014-09-21 21:08:38 +08:00
    然后我选择了 Chrome
    typcn
        24
    typcn  
       2014-09-21 21:10:25 +08:00
    Chrome表示很正常 不是静态啊
    flied
        25
    flied  
       2014-09-21 21:29:45 +08:00   ❤️ 1
    这种动画居然还有人说美?这是多么俗气的动画和网页UI呀,而且既然文字都用图片了,为啥不把字体都修一下呢?

    炫和美是两个概念呀。
    binghe
        26
    binghe  
       2014-09-21 21:29:54 +08:00
    你们是在嘲笑腾讯没有前端攻城师吗?
    MASAILA
        27
    MASAILA  
       2014-09-21 21:38:48 +08:00
    我觉得之前的那个好看
    Totoria
        28
    Totoria  
       2014-09-21 21:44:54 +08:00
    @halfer53 safari8一切正常啊
    raychar
        29
    raychar  
       2014-09-21 22:03:41 +08:00
    chrome桌面浏览很漂亮啊,版本37
    Mac
        30
    Mac  
       2014-09-21 22:24:00 +08:00
    试着装了一下,可惜还是IE核心的,界面很符合我的审美。
    GordianZ
        31
    GordianZ  
    MOD
       2014-09-21 23:26:09 +08:00
    楼主难道说的不是反话么?
    Air_Mu
        32
    Air_Mu  
       2014-09-21 23:29:24 +08:00
    能看到这效果还用这浏览器的人只有傻逼吧~
    vibbow
        33
    vibbow  
       2014-09-22 04:51:53 +08:00
    这特效,看的我都醉了...
    hsj007
        34
    hsj007  
       2014-09-22 07:04:45 +08:00
    http://browser.qq.com/mac/

    这个效果更炫酷一点!
    Havee
        35
    Havee  
       2014-09-22 07:53:17 +08:00
    好吧,tencent的前端没有美术功底,纯粹的堆砌
    whywhywhy
        36
    whywhywhy  
       2014-09-22 08:55:27 +08:00
    @Mac 在选项里开启高速渲染插件就是chrome了
    momo5269
        37
    momo5269  
       2014-09-22 08:57:35 +08:00
    Opera12.17 能切换 无动画效果 Palemoon24 无动画 不能切换 整页输出
    Opera24 IE11全部正常 机器是垃圾配置 都不卡顿

    @Air_Mu IE11能看到 所以……
    momo5269
        38
    momo5269  
       2014-09-22 09:00:41 +08:00
    @shuax 国产所谓的自带高级内核 基本等于 IE6-7的电脑调用自带的IE8……
    Vegetables
        39
    Vegetables  
       2014-09-22 09:07:14 +08:00
    firefox 直接跳转到http://browser.qq.com/index_static.html
    wangyifei6817
        40
    wangyifei6817  
       2014-09-22 10:08:11 +08:00
    Safari效果很流畅.
    baozijun
        41
    baozijun  
       2014-09-22 10:24:13 +08:00
    @hsj007 这,好酷炫
    songxajh
        42
    songxajh  
       2014-09-22 10:28:11 +08:00
    我给你们讲个真相。
    原来搜索QQ浏览器百度第一页都找不到,排名第一的是QQ手机浏览器。
    后来动用了百度的官网策略,才让QQ浏览器官网搜索QQ浏览器排在第一;

    另外一个真相是,请把QQ浏览器的官网跟360、sogou做个对比。
    hahahaha~
    sdysj
        43
    sdysj  
       2014-09-22 10:31:33 +08:00
    这审美,呵呵。
    zythum
        44
    zythum  
       2014-09-22 11:14:59 +08:00
    这个不难做...说实话
    bjhyyc
        45
    bjhyyc  
       2014-09-22 11:22:53 +08:00
    76
        46
    76  
       2014-09-22 11:59:25 +08:00
    QQ很討厭Firefox
    adidag
        47
    adidag  
       2014-09-22 12:05:44 +08:00   ❤️ 1
    推荐大家试试这版官网中使用的 Velocity.js。很好用,作者很强大,可以让喜欢动效设计的朋友更快速的实现想法。

    http://julian.com/research/velocity/
    https://github.com/julianshapiro/velocity
    yuanhsh
        48
    yuanhsh  
       2014-09-22 12:16:27 +08:00
    确实很漂亮。
    Tink
        49
    Tink  
       2014-09-22 13:05:20 +08:00
    手机上跪了
    Actrace
        50
    Actrace  
       2014-09-22 13:59:48 +08:00
    炫不能太多...炫多了会跪的...就像酒精一样.
    asca
        51
    asca  
       2014-09-22 14:06:08 +08:00
    Firefox 不行,用QQ浏览器可以。
    ianva
        52
    ianva  
       2014-09-22 14:41:06 +08:00
    这个设计非常的难看
    wwttc
        53
    wwttc  
       2014-09-22 15:02:41 +08:00
    好炫!!!
    erenno1
        54
    erenno1  
       2014-09-22 15:28:59 +08:00
    ubuntu chrome 可以看到
    erenno1
        55
    erenno1  
       2014-09-22 15:28:59 +08:00
    ubuntu chrome 可以看到
    coetzee
        56
    coetzee  
       2014-09-22 15:57:46 +08:00
    @zythum 求思路
    halfer53
        57
    halfer53  
    OP
       2014-09-22 16:13:57 +08:00
    @coetzee 看源码, 其实很简单, 就是transform的应用 http://browser.qq.com/8.0/js/core.js
    jemyzhang
        58
    jemyzhang  
       2014-09-22 16:53:27 +08:00 via Android
    ubuntu chrome能看到效果啊~firefox静态页面
    learnshare
        59
    learnshare  
       2014-09-22 17:04:06 +08:00
    炫酷是没错,但配色、动画效果都不舒服,设计也算很烂?
    wellsho
        60
    wellsho  
       2014-09-22 17:10:50 +08:00
    为什么用循环?很容易错过下载
    RaymondYip
        61
    RaymondYip  
       2014-09-23 10:55:11 +08:00
    丑到吐血
    qianfei7f
        62
    qianfei7f  
       2014-09-23 15:29:00 +08:00
    整体设计还是觉得很赞,可是字体。。。略丑啊
    xi_lin
        63
    xi_lin  
       2014-09-27 16:27:48 +08:00
    在mac下才看到了效果。。ubuntu chrome见不到。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5008 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 01:13 · PVG 09:13 · LAX 17:13 · JFK 20:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.