Starbucks 星巴克：想你的心意都在这里
案例：想你的心意都在这里
出品：Starbucks 星巴克
亮点：
- 策划上，图文动画+贺卡传递。Loading完毕进入页面，露出相聚主题。“轻触月亮”后浮云散开，镜头拉远，第一个场景展示一家三口，在平湖赏月（旁边亭楼中有星巴克）。第二个场景展示在办公楼里（浦江），一个人在窗边独自赏月。第三个则是一家人在石湖边，阖家团聚，共享月饼，欢声笑语的场景。场景展示完毕，下一页可以点击按钮领取福利，或点击“表达想你星思”来发贺卡：首先左右滑动选择一张中意的中秋贺卡，接着自己写或者选择预设的祝福，点击确定生成后，便可以“传递祝福给朋友”。
- 设计上，深蓝色背景，将月亮衬托的格外明亮。场景间以点击月亮为交互来过渡，并且有类似一镜到底的效果。页面中有星点不停飘动，首屏还用重力感应+视差效果给云层做了动效，这些小细节使得画面很有活力。除此之外，动画也很有线条感，再配合优雅的背景音乐，营造了一种温馨、唯美、安逸的气氛。
- 体验上，相聚、团圆的主题很抓人，看完心里暖暖的。想到国庆和中秋假期在一起，估计很多人已经按耐不住回家的心了。那么问题来了，伍仁月饼好不好吃？
技术实现： RequireJS + Zepto + howler.js + Hammer.JS
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
