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

炫酷

页面

canvas

阿里

104 条回复 • 2016-10-27 22:28:39 +08:00

1 2

❮

❯

1

Panmax

2016-10-24 14:48:26 +08:00

1

啥 canvas 那不就是一张图片吗。。。

http://invite.jeejoy.com/impublic/images/pc.jpg

2

hyzjshwo

2016-10-24 14:48:42 +08:00

我这里打开就一张图片

3

TingHaiJamiE

2016-10-24 14:58:08 +08:00

这就很尴尬了...

4

DlYgod

2016-10-24 14:58:51 +08:00

楼主这个帖子发的简直炫酷

5

kepenj

2016-10-24 15:01:55 +08:00

11

最怕空氣突然安靜

6

chenshuo0529

2016-10-24 15:02:28 +08:00

楼主这个帖子发的简直炫酷

7

Rubbly

2016-10-24 15:05:02 +08:00

5

应该是 http://invite.jeejoy.com/index.html
模拟一下 ua 就能看到了...

8

j3n5en

2016-10-24 15:05:15 +08:00 via Android

1

用手机看，，，的确有点酷炫，，电脑好像就一图片。。。

9

cutehalo

2016-10-24 15:05:20 +08:00

楼主说的应该是手机上的页面吧 233 http://invite.jeejoy.com/index.html

10

liuqhang

2016-10-24 15:05:38 +08:00

在手机上打开就不一样了。

11

EvilD

2016-10-24 15:05:59 +08:00 via Android

表示手机上看不是一张图，淘宝推送这个的时候也正常能看，不懂楼上什么情况

12

wsph123

2016-10-24 15:06:44 +08:00 via iPhone

这个好炫酷

13

poropro

2016-10-24 15:12:20 +08:00 via iPhone

叠加实现吧

14

iMono

2016-10-24 15:16:43 +08:00

楼主应该加上手机浏览该地址

15

rock_cloud

2016-10-24 15:17:04 +08:00

不错，求 BGM ，网易云音乐没识别出来=。=

16

rock_cloud

2016-10-24 15:19:03 +08:00

横屏还有 VR 版~

17

Biwood

2016-10-24 15:20:13 +08:00

公司微信群发过，要在手机上看，这个是阿里外包的吧，确实挺炫酷

18

iugo

2016-10-24 15:30:44 +08:00

3

https://threejs.org/

19

cdlnls

2016-10-24 15:35:34 +08:00 via Android

手机看真的炫酷
左右晃手机，图片也都还能动

20

lei40251

2016-10-24 15:35:57 +08:00

http://invite.jeejoy.com/?utm_source=PC_Landing&utm_medium=Dsplay&utm_campaign=tmall_vr&utm_content=open

是这个。

21

b821025551b

2016-10-24 15:41:12 +08:00

还真支持 VR ，试了一下效果还不错。

22

qiayue

2016-10-24 15:42:05 +08:00

有消息说这个东西做了 180 万，包括策划、设计、开发等等

23

codingkiller

2016-10-24 15:57:57 +08:00

差不多 290 张图片， 3D 效果用的 three.js

24

DualWield

2016-10-24 15:58:13 +08:00

@qiayue 不大可能吧。。。找个外包最多最多几万也出来了

25

nellace

2016-10-24 15:58:14 +08:00

手机上看确实屌屌的

26

wellsc

2016-10-24 16:05:03 +08:00

http://browser.qq.com/mac/index.html 这个也很酷炫

27

loveuqian

2016-10-24 16:05:18 +08:00 via iPhone

手机看了一下
把我看晕了
是真的有点晕

28

hanzichi

2016-10-24 16:05:31 +08:00

不难吧，要是不用 three.js 用 2d 模拟就难了 ..

29

codingkiller

2016-10-24 16:07:44 +08:00

@wellsc 就是看起来配色有点不对劲。

30

depress

2016-10-24 16:09:17 +08:00

说真的，天猫最近 PC 、移动端、甚至电视广告，做的都挺酷炫的...我都觉得看着是种享受...

31

misaka19000

2016-10-24 16:09:27 +08:00

帅炸了！！！

32

alen

2016-10-24 16:12:32 +08:00

手机看确实炫酷。

33

learnshare

2016-10-24 16:14:01 +08:00

移动端上看，也只是一堆贴图，一个动作在跑

35

qiayue

2016-10-24 16:18:01 +08:00

@DualWield 这个东西不是一稿就出来的，肯定是几易其稿。
如果是给素材直接按照目前的设计开发，那肯定几万可以搞定

36

qiayue

2016-10-24 16:18:43 +08:00

@DualWield 而且估计推广的费用也算在里边了

37

miketeam

2016-10-24 16:29:31 +08:00 via iPhone

也是学苹果吗？突然很多词在闪！

38

66beta

2016-10-24 16:32:30 +08:00

1

@DualWield 几万都不够创意总监的 headcount

39

hxidkd

2016-10-24 16:32:56 +08:00 via Android

只有我看不清字吗

40

homfen

2016-10-24 16:33:18 +08:00

没什么难度， z 轴上排一堆图片，再做个移动的动画

41

66beta

2016-10-24 16:35:24 +08:00

three.js 库
来个大家可能都看过的经典案例：《五军之战》
http://middle-earth.thehobbit.com/map

42

Canrz

2016-10-24 16:40:14 +08:00

确实看着挺带感的

43

shenxian

2016-10-24 16:44:59 +08:00

1

坚果手机卡成 PPT

44

gongbaodd

2016-10-24 16:47:40 +08:00

threejs 一路移 camera

45

lytofb

2016-10-24 16:53:08 +08:00

1

有点像游戏死亡空间 2 里面的一段，主角艾萨克在爆炸后用助推器在充满瓦砾的太空里飞跃的场景

46

Phariel

2016-10-24 16:56:17 +08:00

炫的。

47

junphe

2016-10-24 16:58:14 +08:00

手机看了一下确实很炫🐂

48

onice

2016-10-24 16:59:53 +08:00

用 chrome 的移动调试模式看了下，很惊艳啊！

49

CommandZi

2016-10-24 17:02:44 +08:00

6

http://husky.ren/funny.html
只有我想起来这个网站吗

50

hinkal

2016-10-24 17:09:27 +08:00

感觉立体感不强啊，只有横向位移，纵向都是贴图

51

czhq90

2016-10-24 17:11:55 +08:00

1

这个才炫酷，移动终端上看效果更好， http://720yun.com/t/2442eqz69yi?from=timeline&isappinstalled=0&pano_id=903521

52

hinkal

2016-10-24 17:15:35 +08:00

@czhq90 这什么鬼，这不是 google 地图的效果吗

53

breeswish

2016-10-24 17:17:13 +08:00

虽说知道底层技术是怎么实现的，但是想说……以前搜到过一个做了一模一样事情的网页

54

czhq90

2016-10-24 17:29:18 +08:00

@hinkal 不知道啊，就看到别人做的宣传，苏州园区风景

55

Drops

2016-10-24 17:53:06 +08:00 via Android

然而，没什么用，除了浪费了时间

56

eddiechen

2016-10-24 18:10:03 +08:00

确实惊艳了，光从实现上来说倒不是特别难，但第一眼就惊了

57

lunatic5

2016-10-24 18:10:10 +08:00

模拟了 UA 才看到，，，确实不错

58

harker

2016-10-24 18:45:57 +08:00

已阅，效果确实不错

59

Quaintjade

2016-10-24 18:55:20 +08:00 via Android

Github 的 404 页也差不多

60

codelegant

2016-10-24 19:00:16 +08:00 via Android

不错。

61

yjxjn

2016-10-24 19:04:28 +08:00

背景音乐挺酷炫的，关键为啥要拿 canvas 实现呢？这不就引入了一张图么。。。

62

youxiachai

2016-10-24 19:08:17 +08:00

@yjxjn 你用手机看才能看出效果...

63

xiaoerDev

2016-10-24 19:30:22 +08:00

@CommandZi 我好像发现了老司机！！

64

acros

2016-10-24 19:43:43 +08:00

我还以为用陀螺仪实现左右浏览的，还拿着手机转了几圈···

65

zachlhb

2016-10-24 19:45:22 +08:00 via Android

在我手机上好卡

66

loryyang

2016-10-24 19:55:22 +08:00

很帅

67

fwrq41251

2016-10-24 20:15:26 +08:00 via Android

虽然炫酷，但是配色太丑

68

Arnie97

2016-10-24 21:02:36 +08:00 via Android

我手机的破浏览器里只能隐约的看到两个硕大的数字： 00 …

69

810913195

2016-10-24 21:17:44 +08:00

@czhq90 天津有个公司，把整个天津市区都做成这效果了，五六年前的事了

70

4SM

2016-10-24 21:28:15 +08:00

你们都静一静！我大 360 登场～！谢谢。
http://www.360.com/

71

Travers

2016-10-24 21:36:02 +08:00 via Android

为啥打开时 chrome 有个通知… 还看不清:P
http://imgur.com/KDxHpTc

72

ByZHkc3

2016-10-24 21:45:40 +08:00

一看到这个就知道用的 three.js 做的

73

doubleflower

2016-10-24 21:51:34 +08:00

而且很流畅啊，在最垃圾的手机上都不卡。

74

loading

2016-10-24 21:57:10 +08:00 via Android

不错，我关了图片都还能看出效果。

说实话:一般。

75

civet

2016-10-24 22:07:15 +08:00

1

The Scale of the Universe http://www.htwins.net/scale2/

76

mingyun

2016-10-24 23:35:37 +08:00

炫酷

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 犯写文章误导大众

78

Athrob

2016-10-25 08:19:00 +08:00

@CommandZi 这个闪瞎

79

setonfocus

2016-10-25 09:09:26 +08:00

@CommandZi 这个还倒挺有趣的

80

pljhonglu

2016-10-25 10:07:27 +08:00

threejs ，这种 3d 效果制作起来不难~

81

SilentDepth

2016-10-25 10:09:16 +08:00

跟苹果 macOS Sierra 页面效果异曲同工？原理猜测是一堆图片按既定路径放大缩小，视觉上构建出立体和层次。有现成的库和资源的话倒是不难

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') > -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,