雪肌精:《舒芙蕾时刻》

案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分06秒
案例:《舒芙蕾时刻》
品牌:雪肌精
技术实现: video + CreateJS + TweenMax
亮点:
1、创意定位上
雪肌精的护肤品宣传H5,以“柔软”出发,通过类比舒芙蕾,这里的舒芙蕾指的不是甜品美食,也不是新品的名字,是形容使用雪肌精这款产品后,肌肤柔软的像舒芙蕾。
2、策划上
案例整体分为两部分:叙事和生成海报
① 叙事部分:一个女孩感慨生活很难,而后从天空或者应该是想象坠入现实,自己的梳妆台前,出现说明生活本来很柔软,点击“开始回忆”按钮,回忆了三个故事:雨天热心送你回家的男生;出差时司机暖心的安全提示;加班时陪你加班的小暖男。
② 生成海报部分:点击故事最后一屏中的“定制属于你的舒芙蕾时刻”按钮,进入海报生成页面,有三幅海报,左右横向滑动,可以定制海报,需要根据以后海报进行创作,开始看到画面,以为是场景布置,仔细看是可以点击屏幕预先给定的物品,切换物品。这样对手机用户可能更有好些,虽然创作空间不是太大,但是点点就可以生成与别人略微不同的海报,也蛮好。
3、设计上
手绘颗粒度插画,画风偏女性甜美,色彩使用上也是暖色调。
4、技术上
开始叙事部分,看似像是视频,其实是用代码制作的动画,使用的是CreateJS和TweenMax,CreateJS管理画面中的元素精灵,TweenMax完成动画。
生成海报部分的技术实现,也是使用CreateJS;当然用PIXIJS,或者html2canvas等生成海报也可以。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

微信扫一扫
关注该公众号