网易新闻|哒哒×欢乐谷:你的新年Flag

2018-12-27 H5案例分享 H5案例分享
网易新闻|哒哒×欢乐谷:你的新年Flag


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

识别图中二维码

你的新年Flag-查阅二维码

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


案例:你的新年Flag

出品:网易新闻|哒哒×欢乐谷

亮点:

1. 创意上

在2018年最后几天,为2019年设定一个目标,目标再小,也都是我们的flag。

 

2.  策划上

①进入首页,按着虚线滑动,开始立flag,中间有距离2019年的倒计时,下面有文字,你做好重新开始的准备了吗,立下新年Flag

②会看到立Flag的步骤,一共分为三步,第一步,立下你的新年flag;第二步,选择背景色和小装饰;第三步,署名,使Flag生效,点击let’s  go

③根据上面的提示,第一步立Flag,可以选择已经写好的Flag,也可以从下面写下你自己的Flag,选择好了进行下一步选择背景色,每一种颜色元素下面还分为好几种颜色,小装饰可以有猫,茶杯,花瓶等装饰,最后一步是点击我已认真阅读,新的一年我会继续加油,署名完,点击完成。

④最后生成一张2019我的新年FLAG,上面选择了几条,中间会出现几条的Flag,下面有署名,时间,二维码。

 

3. 设计上

首先是灰白色系,表示2018年最后一个季节,冬季下雪的景象。

 

4. 交互上

按着虚线画一个圆,后面的房屋跟着画的过程来变化。

 

5. 技术上

采用pixi.js在canvas对象中绘制不同内容,动画采用图片序列帧依次播放。

 

6. 体验上

根据自己的条件来选择立下的Flag,这个目标,就像2019年我们行动的北极星,引导我们前进的方向。



技术实现: Zepto + Scroller + pixi.js



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

标签

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

相关推荐:

网易新闻:来这里,PICK你的年代装备

融创:声临其境 | 成都三环,最美妙的声音都在这里

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~