案例:怎樣一個美夢,讓你一天都不願醒...
出品:京東
亮點:
策劃上,視頻類。①王小裝躺在床上熟睡,戳一下他,王小裝動一動而後沒反應了;再戳一下,他還是沒醒,給他造個夢吧,有三種夢可供選擇:羞羞的夢、一百億的夢、去野的夢。② 無論選哪種夢,均是跳到了微信朋友圈,但是著裝卻不合適,這是正好有三種服裝可供選擇,選對則可繼續做美夢,選錯就會變成噩夢咯。③ 選擇試試王小裝美夢裡的服裝同款,可去京東看看哦。
設計上,微信朋友圈風格,採用藍色作為主色調,十分的清新淡雅。
技術上,美夢畫面主要採用的是Video視頻,首屏王小裝睡覺是的動作採用的是JS序列幀,三種旋轉這的美夢選項採用的是CSS3的Animation。
體驗上,可能是因為有很多視頻元素,開始的載入速度有點慢,不知道會不會造成不少的流失率。但是換來了很強的趣味性,像小五這樣的強迫症患者,一定會重複玩把所有衣服都試一遍的咩哈哈哈。
技術實現: jQuery
長按識別圖中二維碼
跟小五一起做夢->
小五臉紅心跳地點進「羞羞的夢」
發現...
竟然只是壁咚....
不過,能讓小五一天都不願意醒來的
一定不是什麼美夢...
因為...
小五本來就能睡一天...
以上為「H5案例分享」團隊原創文章,轉載請註明出處!
【京東】相關H5案例推薦:
京東+得力聯合營銷H5案例:魔性H5
京東招聘H5:快來做我的同事
京東超市新年H5宣傳案例 — 大聖歸來
京東H5案例大匯總(乾貨精選)——大合集第五波
更多優秀H5案例見 h5-share.com