V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
frontman
V2EX  ›  程序员

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

  •  
  •   frontman · Oct 24, 2016 · 16761 views
    This topic created in 3472 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
        1
    Panmax  
       Oct 24, 2016   ❤️ 1
    啥 canvas 那不就是一张图片吗。。。

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

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