网易新闻×Ford:新旧交替 太岁换班

2019-02-12 H5案例分享 H5案例分享
网易新闻×Ford:新旧交替 太岁换班


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

新旧交替 太岁换班-查阅二维码

完整欣赏此案例大约需要1分35秒


案例:新旧交替 太岁换班

出品:网易新闻×Ford

亮点:

1.创意定位

本命年容易犯太岁是中国民间的一种说法,也让很多人为了躲太岁,扎上红腰带,戴上小红绳。本H5案例就是从犯太岁的角度出发,先讲述了太岁的来历,再利用躲太岁的小游戏,生成对应的专属新年签,让人很有代入感。

2.策划上

用一只小鼓敲打着加载完页面之后,出现红底黄字的一首小诗,并在诗句中点明“福特”,再点击首屏下方的圆点就进入画中画了。画中画主要是说明太岁的由来,自动慢速推进的设计十分巧妙,犹如人行换景,之后以小游戏的形式增加了用户的互动性和参与度。躲太岁的小游戏设计的也非常巧妙,需要手指拖动界面中奔跑的小人躲避不时出现的太岁的攻击,成绩的计算让人产生胜负欲,挑战之后,输入名字出现的专属新年签也可以长按保存。

3.视觉上

红黄色调、小鼓、怪兽太岁、扎丸子头穿大褂的小儿都代表着浓浓的中国风,喜庆又有趣。

4.技术上

html5、PixiJS的技术加持,增加了画面流畅度。

5.体验上

大家都知道有犯太岁一说,但是把太岁搬上台面来娱乐,还是非常新奇有趣;通过代码的方式获取用户系统的时间,实现时间的不断更新,不仅能够给人时新感,也蕴含着浓浓的年味儿。



技术实现: html5、PixiJS



以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

人民日报&网易有道词典:你的守护瑞兽

腾讯QQ:我的剪纸新年照

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~