美的Midea:寻找旧时光里的新年味

2019-02-06 H5案例分享 H5案例分享
美的Midea:寻找旧时光里的新年味


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

识别图中二维码

寻找旧时光里的新年味-查阅二维码

完整欣赏此案例大约需要50秒


案例:寻找旧时光里的新年味

出品:美的Midea

亮点:

1. 创意定位

以“寻找旧时光里的新年味”为核心,旧时光列出了1975-1996年,共22年的年味。将22年分为3组场景,逐步展示中国年,最后生成海报。

 

2. 策划上

通过14秒的视频,讲述二人世界小家庭到城市景色。

 

而后是一个时间选择圆圈,拖动圆圈选择年份,从1975-1996年。选择好年份后,向上滑动屏幕,不同的年份展示的动画会有不同,分为三组动画画面,在每组动画画面里有展示了三幅年味的画面。

 

第一组(1991-1996年),小伙伴一起放手持烟花,孩子和妈妈一起吃棉花糖,伙伴一起玩游戏机。

 

第二组(1986-1990年),小伙伴一起看手工艺人画糖画,拍全家福,当时的大家电收录机播放音乐。

 

第三组(1975-1985年),绿皮火车的车站,情侣见面,小朋友爱吃的糖葫芦,滚铁圈游戏。

 

画面会出现三个相框,询问,你最想保鲜哪一种年味,点线墙壁上的相框进行选择,确认后,生成保险的年味海报。

 

3. 设计上

 手绘颗粒的卡通画面,运用暖色系颜色偏多,画面中融入美的冰箱和不同年代过年的画面,回忆还是很多,例如:棉花糖、游戏机。

 

4. 技术上

案例上运用的技术框架蛮多,首先是播放了一段mp4格式的视频,而后选择年份后,使用touchstart、touchmove、touchend事件,判断用户触点移动的距离,展示对应的画面,画面中的动画,用到了tween.js。

这支H5中用到的tween.js,是使用JavaScript中的一个简单的补间动画库。属于CreateJS框架的一部分。



技术实现: Egret.js + Tween.js + CreateJs



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

标签

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

相关推荐:

美的:C位出道的阿biu小广告

论拜年,你是骚不过我的

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~