雪肌精:《舒芙蕾时刻》

2019-11-05 H5案例分享 H5案例分享
雪肌精:《舒芙蕾时刻》


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

识别图中二维码

《舒芙蕾时刻》-查阅二维码

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


案例:《舒芙蕾时刻》

品牌:雪肌精

技术实现: video + CreateJS + TweenMax

亮点:

1、创意定位上

雪肌精的护肤品宣传H5,以“柔软”出发,通过类比舒芙蕾,这里的舒芙蕾指的不是甜品美食,也不是新品的名字,是形容使用雪肌精这款产品后,肌肤柔软的像舒芙蕾。

 

2、策划上

案例整体分为两部分:叙事和生成海报

① 叙事部分:一个女孩感慨生活很难,而后从天空或者应该是想象坠入现实,自己的梳妆台前,出现说明生活本来很柔软,点击“开始回忆”按钮,回忆了三个故事:雨天热心送你回家的男生;出差时司机暖心的安全提示;加班时陪你加班的小暖男。

 

② 生成海报部分:点击故事最后一屏中的“定制属于你的舒芙蕾时刻”按钮,进入海报生成页面,有三幅海报,左右横向滑动,可以定制海报,需要根据以后海报进行创作,开始看到画面,以为是场景布置,仔细看是可以点击屏幕预先给定的物品,切换物品。这样对手机用户可能更有好些,虽然创作空间不是太大,但是点点就可以生成与别人略微不同的海报,也蛮好。

 

3、设计上

手绘颗粒度插画,画风偏女性甜美,色彩使用上也是暖色调。

 

4、技术上

开始叙事部分,看似像是视频,其实是用代码制作的动画,使用的是CreateJS和TweenMax,CreateJS管理画面中的元素精灵,TweenMax完成动画。

生成海报部分的技术实现,也是使用CreateJS;当然用PIXIJS,或者html2canvas等生成海报也可以。

 





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

标签

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

相关推荐:

珀莱雅:珀莱雅V脸颜值挑战

网易新闻:永远正年轻

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~