案例演示 ,请长按/扫描以下二维码 ->
识别图中 二维码
完整欣赏此案例大约需要1 分30秒
案例:地球日快乐
品牌:马蜂窝
亮点:
1.创意定位
这是马蜂窝在世界地球日推出的重要节点营销类H5,邀请用户通过一系列的图像选择测试,测试出用户的 地球观。
2.策划上
①进入H5后,封面展示了标题:你真的见过地球吗,点击按钮进入下一页开始自动播放动画。②动画内容 是对地球的介绍,这部分包括地球的概况、面临的环境问题和地球上著名的景点等。③动画结束后,出现一 段引入测试的导语,并邀请用户跟随自己的心意探索自己的地球观。④探索部分,用户需要根据提示上、下 划或左、右滑动屏幕,选择小球的前进方向,最后再按提示拖动白球。完成测试后,用户需要填写昵称以揭 晓答案。⑤答案页也是尾页,用非常抽象的文字和线条讲述了用户的地球观,并邀请用户长按保存分享。
3.设计上
抽象派的风格,以黑色为背景,白色的线条和形状为内容。
4.技术上
动画采用gif和CSS3的自定义动画animation。
5.体验上
这是一个逼格比较高,看起来很深奥的H5,加载速度快,操作流畅,页面酷炫也很有设计感。问题主要出 在不接地气儿,小编玩下来会觉得有点懵。此外,关于地球的介绍部分,自动播放的有点快,用户可能会来 不及看完。
技术实现: html2canvas.js