网易新闻|哒哒×欢乐谷:你的新年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-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号