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