• 请不要在回答技术问题时复制粘贴 AI 生成的内容
frontman
V2EX  ›  程序员

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

  •  
  •   frontman · Oct 24, 2016 · 17804 views
    This topic created in 3661 days ago, the information mentioned may be changed or developed.
    http://invite.jeejoy.com/pc.html
    这个页面特别炫酷
    我审查了下用的 canvas
    能不能快速实现这样一个页面
    104 replies  •  2016-10-27 22:28:39 +08:00
    1  2  
    ❮ ❯
    Panmax
    Panmax
    Oct 24, 2016❤️1
    1
    啥 canvas 那不就是一张图片吗。。。

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

    说实话:一般。
    civet
    civet
    Oct 24, 2016❤️1
    75
    The Scale of the Universe http://www.htwins.net/scale2/
    mingyun
    mingyun
    Oct 24, 2016
    76
    炫酷
    westup
    westup
    Oct 24, 2016❤️1
    77
    作者正主在这 https://github.com/shrekshrek/css3d-engine ,淘宝造物节已经酷炫了一把了 http://show.im20.com.cn/zwj/,另外造物节刷爆朋友圈后,有所谓深度剖析文章写道:“如果你把这支 H5 丢给创意人,说它创意非常赞!他大概会非常不屑的告诉你,这只不过是一个小聪明,谈何创意?如果你把这支 H5 拿给程序员,说这个 H5 技术有多好,他则会很不理解的反问你,这么简单的东西,好在哪里?最后你又拿它给设计师看,说 H5 设计做的好,他更会郁闷到,这哪里有设计,不就是一组很炫酷的插画么?”——哪里都不缺不懂代码的装 X 犯写文章误导大众
    Athrob
    Athrob
    Oct 25, 2016
    78
    @CommandZi 这个闪瞎
    setonfocus
    setonfocus
    Oct 25, 2016
    79
    @CommandZi 这个还倒挺有趣的
    pljhonglu
    pljhonglu
    Oct 25, 2016
    80
    threejs ,这种 3d 效果制作起来不难~
    SilentDepth
    SilentDepth
    Oct 25, 2016
    81
    跟苹果 macOS Sierra 页面效果异曲同工?原理猜测是一堆图片按既定路径放大缩小,视觉上构建出立体和层次。有现成的库和资源的话倒是不难
    soland
    soland
    Oct 25, 2016
    82
    trident: u.indexOf('Trident') > -1, //IE 内核
    presto: u.indexOf('Presto') > -1, //opera 内核
    webKit: u.indexOf('AppleWebKit') > -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
    580a388da131
    Oct 25, 2016
    83
    PC 版找不到关闭音乐的地方。。。
    zhenizhui
    zhenizhui
    Oct 25, 2016
    84
    @CommandZi 6666+ 看了好几分钟。。
    rosu
    rosu
    Oct 25, 2016
    85
    @580a388da131 右击标签页有静音选项
    lightforce
    lightforce
    Oct 25, 2016
    86
    测手机性能不错, mark 下
    cncqw
    cncqw
    Oct 25, 2016
    87
    3D 眩晕
    ThomasZ
    ThomasZ
    Oct 25, 2016
    88
    手机版 taobao 物品展示不是已经有这功能了么
    zlkent
    zlkent
    Oct 25, 2016
    89
    听说这页面花了 170w...
    codz
    codz
    Oct 25, 2016
    90
    看起来很酷炫, 170w,能让客户看到这种效果,不亏.
    lightzh
    lightzh
    Oct 25, 2016
    91
    手机确实酷炫!!!
    old9
    old9
    Oct 25, 2016
    92
    替十年前的 Flash 叹口气。
    professorz
    professorz
    Oct 25, 2016
    93
    分析了 resource 确实是用 three.js 做的,花了 170 万。。。给我找好图片资源,这个技术上不难吧
    moonkiller
    moonkiller
    Oct 25, 2016
    94
    @professorz 我来给你提供图片资源,咱们开工作室吧-,-
    lurrpis
    lurrpis
    Oct 25, 2016
    95
    @CommandZi 看了半小时终于停了
    run2
    run2
    Oct 25, 2016
    96
    @professorz 说的“图片资源”不好钱似的,可能设计费比较贵.
    professorz
    professorz
    Oct 25, 2016
    97
    @sobigfish 学学语文再回复我
    professorz
    professorz
    Oct 25, 2016
    98
    @moonkiller 还得有个会拉活的才行啊
    run2
    run2
    Oct 25, 2016
    99
    好-》要
    但修改不是给 LS 看的,脾气太冲...
    p412726700
    p412726700
    Oct 25, 2016
    100
    晋太元中
    1  2  
    ❮ ❯
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5312 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 211ms · UTC 06:24 · PVG 14:24 · LAX 22:24 · JFK 01:24
    ♥ Do have faith in what you're doing.