网易新闻:龙猫线上扭蛋机今日营业!

2018-08-13 H5案例分享 H5案例分享
网易新闻:龙猫线上扭蛋机今日营业!


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

识别图中二维码

龙猫线上扭蛋机今日营业!-查阅二维码

完整欣赏此案例大约需要45秒


案例:龙猫线上扭蛋机今日营业!

出品:网易新闻

亮点:

  1. 创意定位,以纪念龙猫30周年,龙猫送你礼物为创意点,让用户参与“龙猫线上扭蛋机”活动,点击扭蛋机可以生成各种日本动画卡通人物玩偶3D形象,最后生成一张海报,形成分享和回流。
  2. 策划逻辑,大致分四个步骤:①  视频动画,20秒勾起用户对龙猫的回忆;② 参与扭蛋机活动,点击金币,旋转开关,点击金蛋,会出现一个卡通玩偶3D形象,用户可以旋转观玩偶形象,画面底部有3个按钮:再玩一次、拍照、收藏的玩具;③ 点击拍照图标,会以当前卡通玩偶效果合成一张海报,带人物台词及品牌、回流二维码;④ 点击“收藏的玩具”,会显示用户已经收藏的卡通玩偶形象。 
  3. 技术分析,其中3D部分用到了ThreeJS框架,海报部分用了画布合成框架html2canvas,交互手势部分则用到了很小的手势库AlloyFinger。
  4. 体验上,看到龙猫,想到的不是动画片,而是自己的青春。想想龙猫都30岁了,看龙猫的小朋友们,是不是也都成为了大朋友。



技术实现: Zepto+AlloyFinger+html2canvas+ThreeJS



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

标签

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

相关推荐:

金典 + 网易新闻:今年端午 我只pick金典奶香粽

网易新闻 & 十点读书:你的损友圈

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~