案例：大自然守護者計劃
品牌：網易遊戲
技術實現： pixi.js + tweenMax.js + Scroller.js
亮點：
1. 創意策劃上
通過擬人的手法，講述植物的成長。
① 以內蒙古為故事的位置背景，開始是「新生」，用戶向上滑動屏幕，看到一顆種子在空中落下，落進土壤中，小樹的爸爸媽媽溫柔的對小樹說話。大風來了，小樹的爸爸媽媽用身體為小樹擋住了風魔，自己被大風吹折。
② 小樹又經歷了沙塵、白色垃圾、牛羊的啃食踩踏。小樹發問「為什麼世界的樣子跟爸爸媽媽說的美好不一樣」。
③ 一幅幅小樹心目中美好的世界的樣子和現實幹枯的土地做對比，配合聯合國環境規劃署發布的數據。呼籲大家「留住美好」。
④ 最後，展示目前已有多少人加入大自然守護計劃，關於大自然保護協會的介紹，同時可以生成守護者海報。
2. 設計上
手繪彩色素描，開始畫面以綠色為主，大風、沙塵、白色垃圾、牛羊的啃食踩踏採用深色調營造恐怖的氣氛。
3. 技術上
依然採用的PixiJS進行舞臺的加載，配合tweenMax執行動畫。
4. 體驗上
素材比較多，案例開始加載比較慢，需要等待時間稍長。
【案例截屏】
請長按/掃描以下二維碼
大自然守護者計劃
完整欣賞此案例大約需要2分30秒
<想免費推廣H5可以試試>
H5投稿小助手
以上為【H5案例分享】團隊原創文章！
轉載請務必註明出處！
<蘋果用戶從電腦端訪問 h5ketang.com>
找創意H5案例：h5anli.com
小五堅持分享優質H5，喜歡嗎？