设计了新视差效果的页面,求大家拍砖 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
greenymora
V2EX    分享创造

设计了新视差效果的页面,求大家拍砖

  •  
  •   greenymora 2014-08-04 12:31:23 +08:00 8477 次点击
    这是一个创建于 4087 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.kibey.com/
    很久以前做过视差效果的。这次重新升级了~
    95 条回复    2014-08-06 15:21:51 +08:00
    westup
        1
    westup  
       2014-08-04 12:39:43 +08:00   2
    看到启维两个字就想block,你是否该重新想下你的营销策略?
    kmvan
        2
    kmvan  
       2014-08-04 12:42:38 +08:00 via Android
    手机无法正常浏览
    x86
        3
    x86  
       2014-08-04 12:47:56 +08:00
    漂亮!
    dimlau
        4
    dimlau  
       2014-08-04 12:48:59 +08:00
    这个…根本没发挥出视差效果的功效来啊。
    leer561
        5
    leer561  
       2014-08-04 12:57:46 +08:00
    - -太卡了,帧率好低的感觉
    zhang1605
        6
    zhang1605  
       2014-08-04 12:57:54 +08:00
    "租房距办公室1.5公里内补贴1000~500元" 看成1000到1500了。你们怎么不按常理出牌呀 :)
    Livid
        7
    Livid  
    MOD
    PRO
       2014-08-04 13:01:53 +08:00
    Good job,几乎感到眩晕。
    ryanyu104
        8
    ryanyu104  
       2014-08-04 13:01:54 +08:00
    看着卡 不舒服 设计的不错
    loniper
        9
    loniper  
       2014-08-04 13:05:30 +08:00
    卡爆了
    learnshare
        10
    learnshare  
       2014-08-04 13:08:11 +08:00
    为什么感觉帧率好低?
    airyland
        11
    airyland  
       2014-08-04 13:10:30 +08:00
    我觉得这样的设计已经很Nice了,不需要再加动画了。视觉效果不舒服的动画不如不要。
    jok3r
        12
    jok3r  
       2014-08-04 13:16:07 +08:00
    已经卡到和视差没关系的程度了
    yautou
        13
    yautou  
       2014-08-04 13:21:50 +08:00
    Safari卡成什么了。。。。
    招聘不错~
    greenymora
        14
    greenymora  
    OP
       2014-08-04 13:26:04 +08:00
    @Livid 追求这种亮瞎眼于是不想认真看字的效果==
    notedit
        15
    notedit  
       2014-08-04 13:28:21 +08:00
    同时动的内容太多 有点不舒服了

    给三个妹子点赞
    yangkeao
        16
    yangkeao  
       2014-08-04 13:29:02 +08:00
    @learnshare 同感。动画卡顿严重。
    yangkeao
        17
    yangkeao  
       2014-08-04 13:32:04 +08:00
    有几幅图的视差不明显。

    后来换firefox试一下,因为firefox带有平滑滚动,就舒服到爆了。

    但是其它没有平滑滚动(不含扩展)的效果就差一些。

    后面biu的那个非常喜欢。
    icanfork
        18
    icanfork  
       2014-08-04 13:38:44 +08:00
    http://www.saltaboombox.com.ar/#boombox
    我以为展现在我眼前的是这种~
    greenymora
        19
    greenymora  
    OP
       2014-08-04 13:39:12 +08:00
    @yangkeao
    @yautou
    @jok3r
    你们都是safari吗?
    我这边看,还挺流畅的==
    greenymora
        20
    greenymora  
    OP
       2014-08-04 13:39:50 +08:00
    @westup 没事儿,你反正记住了嘛~
    @kmvan 手机版本还在做
    learnshare
        21
    learnshare  
       2014-08-04 13:49:07 +08:00
    @yangkeao 难道就是在 FF 的平滑滚动上开发的?这种浏览器设置真让人讨厌。

    不清楚是响应的事件有问题,还是滚动的计算有问题。应该多测试。
    emric
        22
    emric  
       2014-08-04 13:53:40 +08:00
    #section-5, #section-6 感觉很像是为了滚动而滚动, 眩晕感很严重..
    总体来说还是挺赞的.
    greenymora
        23
    greenymora  
    OP
       2014-08-04 14:00:56 +08:00
    @emric 6我们要改。5其实是由远到近的移轴模糊效果。在chrome下可以看到,ff不支持。
    dimlau
        24
    dimlau  
       2014-08-04 14:02:29 +08:00
    dovis
        25
    dovis  
       2014-08-04 14:02:36 +08:00
    logo 跟我头像有点像哈~ 缘分~
    mailunion
        26
    mailunion  
       2014-08-04 14:03:41 +08:00
    为什么现在都流行这个呢, QQ 下载界面也是,迅雷也是,个人不喜欢。
    最喜欢那种简洁的,图像不要多。
    hoogle
        27
    hoogle  
       2014-08-04 14:06:08 +08:00
    卡卡的。。回玩贴去睡一下。。
    dimlau
        28
    dimlau  
       2014-08-04 14:13:04 +08:00
    @greenymora 我觉得问题在于……
    1、每个场景几乎都是独立的,从导航进入单独场景之后就无所适从了;
    2、场景的停留时间太短,调整一下每个场景站用的滚动条跨度再大一些,场景中滚动滚轮再去慢慢展现那些动画效果会不会更好些。
    yangkeao
        29
    yangkeao  
       2014-08-04 14:13:25 +08:00
    @greenymora 我是chrome
    yangkeao
        30
    yangkeao  
       2014-08-04 14:14:28 +08:00
    @learnshare 用fullpage.js的时候因为ff的平滑滚动搞不好,放弃了。

    但是应该是可以的啊!至今未找到解决方案
    passluo
        31
    passluo  
       2014-08-04 14:35:30 +08:00
    learnshare
        32
    learnshare  
       2014-08-04 14:43:47 +08:00
    @yangkeao FF 平滑滚动是个多余的功能,不适合交互多的单页网站。
    phperstar
        33
    phperstar  
       2014-08-04 14:44:35 +08:00
    为什么导航不是做成浮动的,不然切换到别的页面之后,只能靠滚动鼠标来切换页面了。用户体验不好呀。。。
    P9
        34
    P9  
       2014-08-04 15:28:14 +08:00
    创始人们的头像亮瞎我的狗眼
    mcwanderer
        35
    mcwanderer  
       2014-08-04 15:45:01 +08:00
    看的头晕
    yads1983
        36
    yads1983  
       2014-08-04 15:52:41 +08:00   1
    两年下来启维知道自己要做什么了吗?
    greenymora
        37
    greenymora  
    OP
       2014-08-04 15:56:14 +08:00
    @yads1983 看简介哦~
    570k
        38
    570k  
       2014-08-04 15:58:00 +08:00
    年轻啊
    lsj5031
        39
    lsj5031  
       2014-08-04 15:58:34 +08:00
    firefox流畅-。-
    bibizhang
        40
    bibizhang  
       2014-08-04 16:04:25 +08:00
    滚得有点硬 弄那种惯性的好点吧 反正也是不同的段落
    bjhyyc
        41
    bjhyyc  
       2014-08-04 18:00:00 +08:00   1
    启维一看就是那种文科生做的东西,华而不实。
    找不到任何重点,全是矫情,连每一个板块都要取一个新名字,是有多自恋啊。
    你要是把力气花在内容制造上,你可以以少浪费一半的时间成功
    换句话说,你们这样的风格吸引的受众肯定也有,但本就小众的受众里选一批喜欢矫情的出来,nozuonodie啊
    herolee
        42
    herolee  
       2014-08-04 18:09:21 +08:00
    不做动画就会死星人?
    41L说得好
    sunng
        43
    sunng  
       2014-08-04 18:26:57 +08:00
    非常赞,几乎没有看出来有动画
    zinev
        44
    zinev  
       2014-08-04 18:37:20 +08:00
    ubuntu下chromium,footer部分,对比太强烈了,是在“不忍直视”
    ellic
        45
    ellic  
       2014-08-04 18:42:34 +08:00
    借楼求 echo 的邀请码。
    tor2
        46
    twor2  
       2014-08-04 18:43:00 +08:00
    除了视觉,希望关注打开速度的优化,里面一些内容非常赞的
    Biwood
        47
    Biwood  
       2014-08-04 18:48:21 +08:00
    挺好的,也许动画可以继续优化一下,做的更惊艳一些
    mikej
        48
    mikej  
       2014-08-04 18:54:32 +08:00
    我的眼睛。。。
    tokune
        49
    tokune  
       2014-08-04 18:57:27 +08:00
    卡成DOG
    momo5269
        50
    momo5269  
       2014-08-04 19:18:36 +08:00
    苍月24.7还行 机器还是很差的那种(AMD x2 5400+)
    花哨也就算了,可是这衔接和色差令人头疼呀。
    如果是横向的可手动选定的滚动banner还行,可那样效果就差太远了……
    momo5269
        51
    momo5269  
       2014-08-04 19:28:49 +08:00
    Opera12.17 通过 平滑滚动流畅 表现比苍月还好
    Iron 35.0 通过 平滑滚动一般 加载表现不如前两个
    Internet Explorer11 通过 相当流畅 感觉上比Opera还好一些 (IE8 现系统无法打开)
    Maxthon 4.4.1.3 勉强 滚动不流畅 拉动不流畅 加载没问题
    Opera 23.0 通过 和Iron一样的毛病但是略好

    环境为 [AMD x2 5400+ ] [6G RAM] [1T HDD] [Windows2008R2 EE SP1 x64]
    除去IE均为硬盘上的便携版版本浏览器
    Iblard
        52
    Iblard  
       2014-08-04 20:26:10 +08:00
    个人体验:请不要伤害我的眼睛,闪的厉害。
    LIMMM
        53
    LIMMM  
       2014-08-04 20:31:17 +08:00
    为什么感觉有点花。。。
    bladecamper
        54
    bladecamper  
       2014-08-04 20:33:48 +08:00
    外链就不能加个target=_blank么
    xavierskip
        55
    xavierskip  
       2014-08-04 20:39:21 +08:00
    chrome卡崩溃了。lZ赔我!
    O21
        56
    O21  
       2014-08-04 20:49:38 +08:00 via iPhone
    黄药师你好
    vinsa
        57
    vinsa  
       2014-08-04 21:54:33 +08:00
    好赞叹
    g0thic
        58
    g0thic  
       2014-08-04 22:26:40 +08:00
    三个妹子都是单身吗?
    Dzinlife
        59
    Dzinlife  
       2014-08-04 22:37:13 +08:00
    这叫scroll hijacking,跟parallex没什么关系。

    页面卡是因为没开启硬件加速,translate(x,y)这样不行滴,写成translate3d(x,y,0)就流畅了。飞纸鹤的那部分就因为有z轴变换从而开启了硬件加速所以不卡。

    页面设计充满学生气息哈,如果目标用户是学生群体那会很合适:)
    tuoxie007
        60
    tuoxie007  
       2014-08-04 22:48:20 +08:00
    你们说什么卡?
    Vernsu
        61
    Vernsu  
       2014-08-04 22:50:33 +08:00
    感觉力度还不够
    nijux
        62
    nijux  
       2014-08-04 23:05:45 +08:00
    整个页面没有很好的传达所要表达的内容
    hljjhb
        63
    hljjhb  
       2014-08-04 23:09:30 +08:00
    The World 6 很卡
    willmok
        64
    willmok  
       2014-08-04 23:31:57 +08:00
    眼花缭乱。
    whuhacker
        65
    whuhacker  
       2014-08-04 23:50:50 +08:00
    窃以为迅雷的效果做得相当之牛逼
    http://vip.xunlei.com/client/

    不过这个可能已经不属于视差滚动的范畴了
    arron
        66
    arron  
       2014-08-05 00:01:02 +08:00   1
    坐等你们下一次改版
    paloalto
        67
    paloalto  
       2014-08-05 00:25:34 +08:00


    不能因为追求绚丽的页面效果而忽视性能。好用第一,好看第二。

    卡成这样的帧率真的很少见。

    mbp高配,chrome最新版
    NordicShaw
        68
    NordicShaw  
       2014-08-05 04:18:09 +08:00
    确实是太卡了。
    housne
        69
    housne  
       2014-08-05 09:17:10 +08:00
    - - 太卡了 。。。 建议用 translate3d 能开启 GPU 加速 。。。
    scarlex
        70
    scarlex  
       2014-08-05 09:28:27 +08:00
    中间好卡好卡。
    karmaz
        71
    karmaz  
       2014-08-05 09:29:07 +08:00
    颜色太多太美我不敢看,会卡啊
    另外lz你的个人信息解码第二个网址打不开啊
    superbear
        72
    superbear  
       2014-08-05 09:47:00 +08:00
    挺炫,赞一个
    pandax
        73
    pandax  
       2014-08-05 10:33:15 +08:00
    想法是挺好的...不过是不是忽略了不同浏览器不同分辨率的兼容?
    弄巧成拙
    doufenger
        74
    doufenger  
       2014-08-05 10:43:10 +08:00
    启维,前年就时不时在看看了。 不过现在还弄不懂这产品到底是干嘛的,没有定位啊。 不过从以前到现在都透着文艺范就是了。
    yellowV2ex
        75
    yellowV2ex  
       2014-08-05 10:44:52 +08:00
    好卡呀,完全体验不到精致的感觉,就是卡
    yqrm
        76
    yqrm  
       2014-08-05 10:47:56 +08:00
    RockiDog
        77
    RockiDog  
       2014-08-05 12:02:35 +08:00
    ff完全不卡啊。。。。系统ubuntu
    kmcool
        78
    kmcool  
       2014-08-05 12:23:55 +08:00
    Safari很卡呢~
    @greenymora 难道是校友?
    ChiangDi
        79
    ChiangDi  
       2014-08-05 13:01:14 +08:00
    Chrome 完全不卡, UBUNTU 13.10
    nagato
        80
    nagato  
       2014-08-05 13:25:47 +08:00
    呵呵呵。。。唯一的效果就是三个妹子长的还算不错,其它几乎忽略不计
    ME865的配置不知道算不算够
    hellojinjie
        81
    hellojinjie  
       2014-08-05 13:38:43 +08:00
    为啥全都是妹子?
    justplaymore
        82
    justplaymore  
       2014-08-05 14:11:26 +08:00
    页面滚动距离和动画播放帧数的比例太大了,滚很多次,动画才动一点点,给人不连贯的感觉,页面的纵向移动让人很难注意到页面某一静止部分的动画细节。
    greenymora
        83
    greenymora  
    OP
       2014-08-05 14:22:41 +08:00
    @paloalto 为什么,我们这边就没有卡过.... T_T 我用的也不是多好的机器啊,就是很普通的低配air
    zythum
        84
    zythum  
       2014-08-05 14:23:33 +08:00
    船长这次的头像不错!

    话说成员都比朱一大。朱一好呀压力了。都不敢卖萌了
    greenymora
        85
    greenymora  
    OP
       2014-08-05 14:26:17 +08:00
    @zythum 哇哦,朱一你终于把自己身份证改到00后出生了?赞!
    27149
        86
    27149  
       2014-08-05 14:32:52 +08:00
    不需要加动画,要么就流畅一点,这样太卡了。感觉细节不够注意,比如echo图标,很像流水线出来的东西。Android下载和ios下载这俩按钮风格够老的了
    zythum
        87
    zythum  
       2014-08-05 15:10:37 +08:00
    @greenymora 哈哈哈...不就卖个萌么...
    greenymora
        88
    greenymora  
    OP
       2014-08-05 15:29:00 +08:00
    @zythum 没事你卖~我粉你
    openroc
        89
    openroc  
       2014-08-05 15:32:07 +08:00
    卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡
    EricX
        90
    EricX  
       2014-08-05 15:37:24 +08:00
    mac下Chrome浏览,卡卡嗒
    frontman
        91
    frontman  
       2014-08-05 16:04:06 +08:00
    卡 再一个没有做响应
    LINAICAI
        92
    LINAICAI  
       2014-08-05 16:20:55 +08:00
    卡卡西。。。
    kennedy32
        93
    kennedy32  
       2014-08-05 22:23:16 +08:00
    很炫
    tamamaxox
        94
    tamamaxox  
       2014-08-06 10:00:06 +08:00
    略卡,
    视觉差 有什么组件辅助开发
    wangyifei6817
        95
    wangyifei6817  
       2014-08-06 15:21:51 +08:00
    卡成这样让我怎么说呢..
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     918 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 32ms UTC 18:50 PVG 02:50 LAX 11:50 JFK 14:50
    Do have faith in what you're doing.
    ubao 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