956
天猫
天猫男装：嘘 地下有动静
请长按/扫描下方二维码
双十一了，嘘～地下有动静
完整欣赏此案例大约需要1分30秒
案例：嘘～地下有动静
出品：天猫男装
技术实现：jQuery + Canvas
亮点：
1. 策划上，图文展示类。这是天猫为即将到来的双十一活动所打造的一款宣传h5。
首先Loading页面，楼梯指示表幽灵般的浮现，指针停留在B5处，底下浮现出进度表，随着进度的加载，指针也从B5处转移到G处，楼梯的画面浮现，诡异的天猫标志和“你敢不敢前往底下时尚圈”文字浮现出来。有两个按钮，一个是“刷脸出席”，需要上传清晰正面照，另一个是“匿名闯入”按钮，两个入口均可进入下一阶段。
而后浮现出电梯的按钮，用户可从B1-B5中选择一个进入。
电梯缓缓开动，到达目的地，按屏幕上的指示进行相应的操作。
穿着品牌服装的小鬼们在嘻哈跳舞，用户可选择偷拍，也可返回重新选择进入其他楼层进行欣赏。
弹出对话框，以文案的方式进行宣传双十一活动。
2. 设计上，漫画风格。以深蓝色和黑色作为进入楼层前的主色调，吸引用户的注意力，进入楼层后，以缤纷色彩为主，打造一个欢快的场景，里面的人物形象很搞怪哦。
3. 技术上，在全款h5炫酷的动画特效上，采用Canvas技术进行实现。
【先睹为快】
点击播放
GIF/756K
点击播放
GIF/791K
点击播放
GIF/835K
【案例截屏】
最后更新：2017-11-04 22:22:45