Starbucks 星巴克:想你的心意都在这里

2017-09-19 H5案例分享 H5案例分享
Starbucks 星巴克:想你的心意都在这里

案例:想你的心意都在这里

出品:Starbucks 星巴克

亮点:

  1. 策划上,图文动画+贺卡传递。Loading完毕进入页面,露出相聚主题。“轻触月亮”后浮云散开,镜头拉远,第一个场景展示一家三口,在平湖赏月(旁边亭楼中有星巴克)。第二个场景展示在办公楼里(浦江),一个人在窗边独自赏月。第三个则是一家人在石湖边,阖家团聚,共享月饼,欢声笑语的场景。场景展示完毕,下一页可以点击按钮领取福利,或点击“表达想你星思”来发贺卡:首先左右滑动选择一张中意的中秋贺卡,接着自己写或者选择预设的祝福,点击确定生成后,便可以“传递祝福给朋友”。

 

  1. 设计上,深蓝色背景,将月亮衬托的格外明亮。场景间以点击月亮为交互来过渡,并且有类似一镜到底的效果。页面中有星点不停飘动,首屏还用重力感应+视差效果给云层做了动效,这些小细节使得画面很有活力。除此之外,动画也很有线条感,再配合优雅的背景音乐,营造了一种温馨、唯美、安逸的气氛。

 

  1. 体验上,相聚、团圆的主题很抓人,看完心里暖暖的。想到国庆和中秋假期在一起,估计很多人已经按耐不住回家的心了。那么问题来了,伍仁月饼好不好吃?



技术实现: RequireJS + Zepto + howler.js + Hammer.JS



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

识别图中二维码

想你的心意都在这里-查阅二维码




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

标签

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

相关推荐:

星巴克樱花节活动H5:春色樱花季,一同去旅行!

星巴克 + moleskine:不完美的英雄爸爸

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~