阿里双 11 这个宣传页做的简直炫酷 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
frontman
V2EX    程序员

阿里双 11 这个宣传页做的简直炫酷

  •  
  •   frontman 2016-10-24 14:34:51 +08:00 16190 次点击
    这是一个创建于 3322 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://invite.jeejoy.com/pc.html
    这个页面特别炫酷
    我审查了下用的 canvas
    能不能快速实现这样一个页面
    104 条回复    2016-10-27 22:28:39 +08:00
    1  2  
    Panmax
        1
    Panmax  
       2016-10-24 14:48:26 +08:00   1
    啥 canvas 那不就是一张图片吗。。。

    http://invite.jeejoy.com/impublic/images/pc.jpg
    hyzjshwo
        2
    hyzjshwo  
       2016-10-24 14:48:42 +08:00
    我这里打开就一张图片
    TingHaiJamiE
        3
    TingHaiJamiE  
       2016-10-24 14:58:08 +08:00
    这就很尴尬了...
    DlYgod
        4
    DlYgod  
       2016-10-24 14:58:51 +08:00
    楼主这个帖子发的简直炫酷
    kepenj
        5
    kepenj  
       2016-10-24 15:01:55 +08:00   11
    最怕空突然安
        6
    Lorneeeee  
       2016-10-24 15:02:28 +08:00
    楼主这个帖子发的简直炫酷
    Rubbly
        7
    Rubbly  
       2016-10-24 15:05:02 +08:00   5
    应该是 http://invite.jeejoy.com/index.html
    模拟一下 ua 就能看到了...
    j3n5en
        8
    j3n5en  
       2016-10-24 15:05:15 +08:00 via Android   1
    用手机看,,,的确有点酷炫,,电脑好像就一图片。。。
    cutehalo
        9
    cutehalo  
       2016-10-24 15:05:20 +08:00
    楼主说的应该是手机上的页面吧 233 http://invite.jeejoy.com/index.html
    liuqhang
        10
    liuqhang  
       2016-10-24 15:05:38 +08:00
    在手机上打开就不一样了。
    EvilD
        11
    EvilD  
       2016-10-24 15:05:59 +08:00 via Android
    表示手机上看不是一张图,淘宝推送这个的时候也正常能看,不懂楼上什么情况
    wsph123
        12
    wsph123  
       2016-10-24 15:06:44 +08:00 via iPhone
    这个好炫酷
    iMono
        14
    iMono  
       2016-10-24 15:16:43 +08:00
    楼主应该加上 手机浏览该地址
    rock_cloud
        15
    rock_cloud  
       2016-10-24 15:17:04 +08:00
    不错,求 BGM ,网易云音乐没识别出来=。=
    rock_cloud
        16
    rock_cloud  
       2016-10-24 15:19:03 +08:00
    横屏还有 VR 版~
    Biwood
        17
    Biwood  
       2016-10-24 15:20:13 +08:00
    公司微信群发过,要在手机上看,这个是阿里外包的吧,确实挺炫酷
    iugo
        18
    iugo  
       2016-10-24 15:30:44 +08:00   3
    cctv6
        19
    cctv6  
       2016-10-24 15:35:34 +08:00 via Android
    手机看真的炫酷
    左右晃手机,图片也都还能动
    b821025551b
        21
    b821025551b  
       2016-10-24 15:41:12 +08:00
    还真支持 VR ,试了一下效果还不错。
    qiayue
        22
    qiayue  
    PRO
       2016-10-24 15:42:05 +08:00
    有消息说这个东西做了 180 万,包括策划、设计、开发等等
    codingkiller
        23
    codingkiller  
       2016-10-24 15:57:57 +08:00
    差不多 290 张图片, 3D 效果用的 three.js
    DualWield
        24
    DualWield  
       2016-10-24 15:58:13 +08:00
    @qiayue 不大可能吧。。。找个外包最多最多几万也出来了
    nellace
        25
    nellace  
       2016-10-24 15:58:14 +08:00
    手机上看确实的
    wellsc
        26
    wellsc  
       2016-10-24 16:05:03 +08:00
    loveuqian
        27
    loveuqian  
       2016-10-24 16:05:18 +08:00 via iPhone
    手机看了一下
    把我看晕了
    是真的有点晕
    hanzichi
        28
    hanzichi  
       2016-10-24 16:05:31 +08:00
    不难吧,要是不用 three.js 用 2d 模拟就难了 ..
    codingkiller
        29
    codingkiller  
       2016-10-24 16:07:44 +08:00
    @wellsc 就是看起来配色有点不对劲。
    depress
        30
    depress  
       2016-10-24 16:09:17 +08:00
    说真的,天猫最近 PC 、移动端、甚至电视广告,做的都挺酷炫的...我都觉得看着是种享受...
    misaka19000
        31
    misaka19000  
       2016-10-24 16:09:27 +08:00
    帅炸了!!!
    alen
        32
    alen  
       2016-10-24 16:12:32 +08:00
    手机看确实炫酷。
    learnshare
        33
    learnshare  
       2016-10-24 16:14:01 +08:00
    移动端上看,也只是一堆贴图,一个动作在跑
    qiayue
        35
    qiayue  
    PRO
       2016-10-24 16:18:01 +08:00
    @DualWield 这个东西不是一稿就出来的,肯定是几易其稿。
    如果是给素材直接按照目前的设计开发,那肯定几万可以搞定
    qiayue
        36
    qiayue  
    PRO
       2016-10-24 16:18:43 +08:00
    @DualWield 而且估计推广的费用也算在里边了
    miketeam
        37
    miketeam  
       2016-10-24 16:29:31 +08:00 via iPhone
    也是学苹果吗?突然很多词在闪!
    66beta
        38
    66beta  
       2016-10-24 16:32:30 +08:00   1
    @DualWield 几万都不够创意总监的 headcount
    hxidkd
        39
    hxidkd  
       2016-10-24 16:32:56 +08:00 via Android
    只有我看不清字吗
    homfen
        40
    homfen  
       2016-10-24 16:33:18 +08:00
    没什么难度, z 轴上排一堆图片,再做个移动的动画
    66beta
        41
    66beta  
       2016-10-24 16:35:24 +08:00
    three.js 库
    来个大家可能都看过的经典案例:《五军之战》
    http://middle-earth.thehobbit.com/map
    Canrz
        42
    Canrz  
       2016-10-24 16:40:14 +08:00
    确实看着挺带感的
    shenxian
        43
    shenxian  
       2016-10-24 16:44:59 +08:00   1
    坚果手机 卡成 PPT
    gongbaodd
        44
    gongbaodd  
       2016-10-24 16:47:40 +08:00
    threejs 一路移 camera
    lytofb
        45
    lytofb  
       2016-10-24 16:53:08 +08:00   1
    有点像游戏死亡空间 2 里面的一段,主角艾萨克在爆炸后用助推器在充满瓦砾的太空里飞跃的场景
    Phariel
        46
    Phariel  
       2016-10-24 16:56:17 +08:00
    炫的。
    junphe
        47
    junphe  
       2016-10-24 16:58:14 +08:00
    手机看了一下确实很炫
    onice
        48
    onice  
       2016-10-24 16:59:53 +08:00
    用 chrome 的移动调试模式看了下,很惊艳啊!
    CommandZi
        49
    CommandZi  
       2016-10-24 17:02:44 +08:00   6
    http://husky.ren/funny.html
    只有我想起来这个网站吗
    hinkal
        50
    hinkal  
       2016-10-24 17:09:27 +08:00
    感觉立体感不强啊,只有横向位移,纵向都是贴图
    czhq90
        51
    czhq90  
       2016-10-24 17:11:55 +08:00   1
    这个才炫酷,移动终端上看效果更好, http://720yun.com/t/2442eqz69yi?from=timeline&isappinstalled=0&pano_id=903521
    hinkal
        52
    hinkal  
       2016-10-24 17:15:35 +08:00
    @czhq90 这什么鬼,这不是 google 地图的效果吗
    breeswish
        53
    breeswish  
       2016-10-24 17:17:13 +08:00
    虽说知道底层技术是怎么实现的,但是想说……以前搜到过一个做了一模一样事情的网页
    czhq90
        54
    czhq90  
       2016-10-24 17:29:18 +08:00
    @hinkal 不知道啊,就看到别人做的宣传,苏州园区风景
    Drops
        55
    Drops  
       2016-10-24 17:53:06 +08:00 via Android
    然而,没什么用,除了浪费了时间
    eddiechen
        56
    eddiechen  
       2016-10-24 18:10:03 +08:00
    确实惊艳了,光从实现上来说倒不是特别难,但第一眼就惊了
    lunatic5
        57
    lunatic5  
       2016-10-24 18:10:10 +08:00
    模拟了 UA 才看到,,,确实不错
    harker
        58
    harker  
       2016-10-24 18:45:57 +08:00
    已阅,效果确实不错
    Quaintjade
        59
    Quaintjade  
       2016-10-24 18:55:20 +08:00 via Android
    Github 的 404 页也差不多
    codelegant
        60
    codelegant  
       2016-10-24 19:00:16 +08:00 via Android
    不错。
    yjxjn
        61
    yjxjn  
       2016-10-24 19:04:28 +08:00
    背景音乐挺酷炫的,关键为啥要拿 canvas 实现呢?这不就引入了一张图么。。。
    youxiachai
        62
    youxiachai  
       2016-10-24 19:08:17 +08:00
    @yjxjn 你用手机看才能看出效果...
    xiaoerDev
        63
    xiaoerDev  
       2016-10-24 19:30:22 +08:00
    @CommandZi 我好像发现了老司机!!
    acros
        64
    acros  
       2016-10-24 19:43:43 +08:00
    我还以为用陀螺仪实现左右浏览的,还拿着手机转了几圈
    zachlhb
        65
    zachlhb  
       2016-10-24 19:45:22 +08:00 via Android
    在我手机上好卡
    loryyang
        66
    loryyang  
       2016-10-24 19:55:22 +08:00
    很帅
    fwrq41251
        67
    fwrq41251  
       2016-10-24 20:15:26 +08:00 via Android
    虽然炫酷,但是配色太丑
    Arnie97
        68
    Arnie97  
       2016-10-24 21:02:36 +08:00 via Android
    我手机的破浏览器里只能隐约的看到两个硕大的数字: 00 …
    810913195
        69
    810913195  
       2016-10-24 21:17:44 +08:00
    @czhq90 天津有个公司,把整个天津市区都做成这效果了,五六年前的事了
    4SM
        70
    4SM  
       2016-10-24 21:28:15 +08:00
    你们都静一静!我大 360 登场~!谢谢。
    http://www.360.com/
    Travers
        71
    Travers  
       2016-10-24 21:36:02 +08:00 via Android
    为啥打开时 chrome 有个通知… 还看不清:P
    http://imgur.com/KDxHpTc
    ByZHkc3
        72
    ByZHkc3  
       2016-10-24 21:45:40 +08:00
    一看到这个就知道用的 three.js 做的
    doubleflower
        73
    doubleflower  
       2016-10-24 21:51:34 +08:00
    而且很流畅啊,在最垃圾的手机 上都不卡。
    loading
        74
    loading  
       2016-10-24 21:57:10 +08:00 via Android
    不错,我关了图片都还能看出效果。

    说实话:一般。
    civet
        75
    civet  
       2016-10-24 22:07:15 +08:00   1
    The Scale of the Universe http://www.htwins.net/scale2/
    mingyun
        76
    mingyun  
       2016-10-24 23:35:37 +08:00
    炫酷
    westup
        77
    westup  
       2016-10-24 23:41:14 +08:00   1
    作者正主在这 https://github.com/shrekshrek/css3d-engine ,淘宝造物节已经酷炫了一把了 http://show.im20.com.cn/zwj/,另外造物节刷爆朋友圈后,有所谓深度剖析文章写道:“如果你把这支 H5 丢给创意人,说它创意非常赞!他大概会非常不屑的告诉你,这只不过是一个小聪明,谈何创意?如果你把这支 H5 拿给程序员,说这个 H5 技术有多好,他则会很不理解的反问你,这么简单的东西,好在哪里?最后你又拿它给设计师看,说 H5 设计做的好,他更会郁闷到,这哪里有设计,不就是一组很炫酷的插画么?”哪里都不缺不懂代码的装 X 犯写文章误导大众
    Athrob
        78
    Athrob  
       2016-10-25 08:19:00 +08:00
    @CommandZi 这个闪瞎
    setonfocus
        79
    setonfocus  
       2016-10-25 09:09:26 +08:00
    @CommandZi 这个还倒挺有趣的
    pljhonglu
        80
    pljhonglu  
       2016-10-25 10:07:27 +08:00
    threejs ,这种 3d 效果制作起来不难~
    SilentDepth
        81
    SilentDepth  
       2016-10-25 10:09:16 +08:00
    跟苹果 macOS Sierra 页面效果异曲同工?原理猜测是一堆图片按既定路径放大缩小,视觉上构建出立体和层次。有现成的库和资源的话倒是不难
    soland
        82
    soland  
       2016-10-25 10:10:04 +08:00
    trident: u.indexOf('Trident') > -1, //IE 内核
    presto: u.indexOf('Presto') > -1, //opera 内核
    webKit: u.indexOf('AppleWebKit') &g; -1, //苹果、谷歌内核
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios 终端
    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android 终端或 uc 浏览器
    iPhone: u.indexOf('iPhone') > -1, //是否为 iPhone 或者 QQHD 浏览器
    iPad: u.indexOf('iPad') > -1, //是否 iPad
    webApp: u.indexOf('Safari') == -1, //是否 web 应该程序,没有头部与底部
    iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
    weixin: u2.match(/MicroMessenger/i) == "micromessenger",
    ali: u.indexOf('AliApp') > -1,
    580a388da131
        83
    580a388da131  
       2016-10-25 10:20:16 +08:00
    PC 版找不到关闭音乐的地方。。。
    zhenizhui
        84
    zhenizhui  
       2016-10-25 10:21:15 +08:00
    @CommandZi 6666+ 看了好几分钟。。
    rosu
        85
    rosu  
       2016-10-25 10:31:58 +08:00
    @580a388da131 右击标签页有静音选项
    lightforce
        86
    lightforce  
       2016-10-25 10:34:58 +08:00
    测手机性能不错, mark 下
    cncqw
        87
    cncqw  
       2016-10-25 10:40:28 +08:00
    3D 眩晕
    ThomasZ
        88
    ThomasZ  
       2016-10-25 10:57:39 +08:00
    手机版 taobao 物品展示不是已经有这功能了么
    zlkent
        89
    zlkent  
    PRO
       2016-10-25 11:05:12 +08:00
    听说这页面花了 170w...
    codz
        90
    codz  
       2016-10-25 11:05:58 +08:00
    看起来很酷炫, 170w,能让客户看到这种效果,不亏.
    lightzh
        91
    lightzh  
       2016-10-25 11:09:43 +08:00
    手机确实酷炫!!!
    old9
        92
    old9  
       2016-10-25 12:00:33 +08:00
    替十年前的 Flash 叹口气。
    professorz
        93
    professorz  
       2016-10-25 12:21:58 +08:00
    分析了 resource 确实是用 three.js 做的,花了 170 万。。。给我找好图片资源,这个技术上不难吧
    moonkiller
        94
    moonkiller  
       2016-10-25 14:19:01 +08:00
    @professorz 我来给你提供图片资源,咱们开工作室吧-,-
    lurrpis
        95
    lurrpis  
       2016-10-25 14:19:14 +08:00
    @CommandZi 看了半小时终于停了
    run2
        96
    run2  
       2016-10-25 14:22:46 +08:00
    @professorz 说的“图片资源”不好钱似的,可能设计费比较贵.
    professorz
        97
    professorz  
       2016-10-25 14:27:06 +08:00
    @sobigfish 学学语文再回复我
    professorz
        98
    professorz  
       2016-10-25 14:28:33 +08:00
    @moonkiller 还得有个会拉活的才行啊
    run2
        99
    run2  
       2016-10-25 14:31:30 +08:00
    好-》要
    但修改不是给 LS 看的,脾气太冲...
    p412726700
        100
    p412726700  
       2016-10-25 14:34:56 +08:00
    晋太元中
    1  2  
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2657 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 33ms UTC 12:52 PVG 20:52 LAX 04:52 JFK 07:52
    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