美赞臣:爱的袋鼠抱

2018-11-21 H5案例分享 H5案例分享
美赞臣:爱的袋鼠抱


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

识别图中二维码

爱的袋鼠抱-查阅二维码

完整欣赏此案例大约需要3分钟


案例:爱的袋鼠抱

出品:美赞臣

亮点:

1. 创意上,每年的11月17日是世界早产儿日,这支H5以关注早产儿群体为出发点,通过别具风格的插画和音效,带你进入一个早产儿在梦境中寻找温暖怀抱的奇幻之旅,最后通过定制化海报分享以普及对早产儿非常有益的“袋鼠抱”式护理法。

 

“袋鼠抱”源自于国际流行的“袋鼠式护理法”,由母亲抱住婴儿进行直接的皮肤接触并进行频繁的母乳喂养。这种方法被专业医护人员公认为一种天然、安全、有效的照顾早产宝宝的方式,在发达国家已被引入新生儿重症监护病房。

 

2.策划上,围绕早产儿和袋鼠抱展开,讲述了一个叫Warm的早产儿寻找温暖的抱抱的故事(小主人翁的名字起得很有用意,寓意Warm需要温暖),首先是一个睁开眼睛的界面,一只小袋鼠说“快醒醒,我带你去找温暖的抱抱”,而后他们经历了大海大而软的拥抱,石头人坚而硬的拥抱,中间被象征着疾病的蛇偷袭,最后袋鼠妈妈温暖的育儿袋让小Warm终于找到了想要的抱抱,这时Warm醒来,原来是妈妈用袋鼠抱温暖着Warm,随后介绍世界早产儿的相关数据,以及什么是袋鼠抱。而后是四个选择,帮小婴儿选择他最需要的抱抱,最后是制作你的袋鼠抱合成海报

 

3.设计上,温馨感的手绘插画,以小婴儿和小袋鼠为主角,讲述故事。手绘插画是本H5的看点之一,同时以童话和奇幻感贯穿,比如鲸鱼在空中游动、穿过树林时的鸟鸣,大海的海浪声等等,让人印象深刻。H5本身的BGM背景乐也颇为灵动,让整个故事不落俗套。

 

4.技术上,通过JS动态调整canvas画布中的动画精灵,来完成早产儿找抱抱的故事,这样操作的好处是可以更好的兼容IOS和安卓手机,对动画画面的展示。

 

5.交互上,用户通过滑动手机屏幕,观看动画故事,增加用户的参与感。最后用户上传自己和孩子或朋友的头像照片,可以合成专属的袋鼠抱海报,也方便用户参与后分享好友和朋友圈,从而达到对“袋鼠抱”的爱心传递。



技术实现: canvas + 图片合成



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

标签

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

相关推荐:

网易考拉:37°温暖计划

爱奇艺 奇葩说:测测在你生活的城市,你最像什么?

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~