《哈利波特與H5》

進入魔法世界

完整欣賞此案例大約需要3分鐘

【案例】 紀念哈利波特20周年

【出品】 網易新聞 | 噠噠

【製作】 沸點工作室

【技術】 Canvas + jQuery + Pixi.js

【亮點】

策划上，圖文展示類H5。網易新聞，為紀念哈里波特的魔法世界誕生20周年所制。Loading完畢進入頁面，用戶上下滑動屏幕來查看內容。

隨著屏幕的上下滑動，文字會不斷地左右移動，還有類似進度條等動效出現，給人一種正在閱讀魔法小說的既視感。

小說部分結束，通過左右滑動「來到霍格沃茨學院」，接著是熟悉的分學院環節。

選擇一個按鈕（即選擇學院）後，繼續滑動屏幕，通過「肖像走廊」、「魁地奇球場」，來到魔法課堂。在右上角選擇一個你想學的咒語，並在屏幕任意位置按提示順序畫咒語符號，即可發動咒語，不按順序畫也會有很神奇的效果哦！

離開課堂，去往最後一站，即「圖書館」。屏幕上方是打開的魔法書，書上有重要角色畫像，屏幕下方是該角色經典語錄的中英文片段，用戶通過下一頁切換人物。

最後隨著斯內普教授施展的遺忘咒，進入結尾頁，結尾頁有小說作者「JK羅琳」的一句話，H5製作團隊的分工以及鳴謝。用戶在此頁可以點擊按鈕下載網易新聞客戶端。

設計上，淡黃色背景。畫面動靜結合，用戶滑動時，整個頁面都會如魔法書一般動起來，不操作時，也有慢慢飄動的元素，非常有活力。

點開頁面，即是熟悉的音樂旋律，思緒從這時起，就完全被這支H5牽著走了。整體動畫效果恰到好處，很「魔法」，同時又不會讓人覺得華而不實。

小編覺得案例中最亮眼的地方，是畫咒語環節，畫出來的咒語，如果是預期的軌跡，則會看到施咒成功，如果不是，則會……

體驗上，案例中展現的全是小說和電影中最經典的那些場景，動效表現也很驚艷，相信無論是小說黨還是電影黨，都能有很好的滿足感。

案例在追憶情懷的同時，又結合了豐富的交互形式，給了用戶滿滿的參與感，讓用戶的共鳴又增強了一分。

最後到結尾頁的過渡也非常具有新意，同時也將最能調動情緒的角色放在最後，算是收了一個很完美的尾。

以上為【H5案例分享】團隊原創文章！

【CreateJS】相關H5課程推薦：

找創意H5，上h5-share.com

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！