马蜂窝:地球日快乐

2019-04-23 H5案例分享 H5案例分享
马蜂窝:地球日快乐


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

识别图中二维码

地球日快乐-查阅二维码

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


案例:地球日快乐

品牌:马蜂窝

亮点:

1.创意定位

这是马蜂窝在世界地球日推出的重要节点营销类H5,邀请用户通过一系列的图像选择测试,测试出用户的地球观。

 

2.策划上

①进入H5后,封面展示了标题:你真的见过地球吗,点击按钮进入下一页开始自动播放动画。②动画内容是对地球的介绍,这部分包括地球的概况、面临的环境问题和地球上著名的景点等。③动画结束后,出现一段引入测试的导语,并邀请用户跟随自己的心意探索自己的地球观。④探索部分,用户需要根据提示上、下划或左、右滑动屏幕,选择小球的前进方向,最后再按提示拖动白球。完成测试后,用户需要填写昵称以揭晓答案。⑤答案页也是尾页,用非常抽象的文字和线条讲述了用户的地球观,并邀请用户长按保存分享。

 

3.设计上

抽象派的风格,以黑色为背景,白色的线条和形状为内容。

 

4.技术上

动画采用gif和CSS3的自定义动画animation。

 

5.体验上

这是一个逼格比较高,看起来很深奥的H5,加载速度快,操作流畅,页面酷炫也很有设计感。问题主要出在不接地气儿,小编玩下来会觉得有点懵。此外,关于地球的介绍部分,自动播放的有点快,用户可能会来不及看完。



技术实现: html2canvas.js



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

标签

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

相关推荐:

360×bottle dream :突然掉进安全感黑洞

网易新闻:她挣扎48小时后死去,无人知晓

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~