案例：《舒芙蕾時刻》
品牌：雪肌精
技術實現： video + CreateJS + TweenMax
亮點：
1、創意定位上
雪肌精的護膚品宣傳H5，以「柔軟」出發，通過類比舒芙蕾，這裡的舒芙蕾指的不是甜品美食，也不是新品的名字，是形容使用雪肌精這款產品後，肌膚柔軟的像舒芙蕾。
2、策劃上
案例整體分為兩部分：敘事和生成海報
① 敘事部分：一個女孩感慨生活很難，而後從天空或者應該是想像墜入現實，自己的梳妝檯前，出現說明生活本來很柔軟，點擊「開始回憶」按鈕，回憶了三個故事：雨天熱心送你回家的男生；出差時司機暖心的安全提示；加班時陪你加班的小暖男。
② 生成海報部分：點擊故事最後一屏中的「定製屬於你的舒芙蕾時刻」按鈕，進入海報生成頁面，有三幅海報，左右橫向滑動，可以定製海報，需要根據以後海報進行創作，開始看到畫面，以為是場景布置，仔細看是可以點擊屏幕預先給定的物品，切換物品。這樣對手機用戶可能更有好些，雖然創作空間不是太大，但是點點就可以生成與別人略微不同的海報，也蠻好。
3、設計上
手繪顆粒度插畫，畫風偏女性甜美，色彩使用上也是暖色調。
4、技術上
開始敘事部分，看似像是視頻，其實是用代碼製作的動畫，使用的是CreateJS和TweenMax，CreateJS管理畫面中的元素精靈，TweenMax完成動畫。
生成海報部分的技術實現，也是使用CreateJS；當然用PIXIJS，或者html2canvas等生成海報也可以。
【案例截屏】
請長按/掃描以下二維碼
《舒芙蕾時刻》
完整欣賞此案例大約需要1分06秒
<想免費推廣H5可以試試>
H5投稿小助手
以上為【H5案例分享】團隊原創文章！
轉載請務必註明出處！
【學H5-從今天開始，不晚】
【帶你一步一步成為H5高手】
找創意H5案例：h5anli.com
小五堅持分享優質H5，喜歡嗎？