TMALL天猫：嘘～地下有动静

2017-11-04 H5案例分享 H5案例分享

案例：嘘～地下有动静

出品：TMALL天猫

亮点：

策划上，图文展示类。这是天猫为即将到来的双十一活动所打造的一款宣传h5。① 首先Loading页面，楼梯指示表幽灵般的浮现，指针停留在B5处，底下浮现出进度表，随着进度的加载，指针也从B5处转移到G处，楼梯的画面浮现，诡异的天猫标志和“你敢不敢前往底下时尚圈”文字浮现出来。有两个按钮，一个是“刷脸出席”，需要上传清晰正面照，另一个是“匿名闯入”按钮，两个入口均可进入下一阶段。② 而后浮现出电梯的按钮，用户可从B1-B5中选择一个进入。③ 电梯缓缓开动，到达目的地，按屏幕上的指示进行相应的操作。④ 穿着品牌服装的小鬼们在嘻哈跳舞，用户可选择偷拍，也可返回重新选择进入其他楼层进行欣赏。⑤ 弹出对话框，以文案的方式进行宣传双十一活动。
设计上，漫画风格。以深蓝色和黑色作为进入楼层前的主色调，吸引用户的注意力，进入楼层后，以缤纷色彩为主，打造一个欢快的场景，里面的人物形象很搞怪哦。
技术上，在全款h5炫酷的动画特效上，采用Canvas技术进行实现。

技术实现： jQuery + Canvas

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

识别图中二维码

嘘～地下有动静-查阅二维码

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

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

标签