上期為大家?guī)碓S多優(yōu)秀的H5案例，反響不錯(cuò)，很多朋友都希望能再多分享一些。下面，藍(lán)橙互動(dòng)就為大家?guī)淼诙诰xH5案例合集。

案例名稱：跟我到古代云逛廟

案例品牌：餓了么X口碑網(wǎng)X清明上河圖

餓了么與清明上河圖合作，將餓了么上面的商家植入進(jìn)上河圖里面的商鋪，整幅畫面以動(dòng)態(tài)形式呈現(xiàn)，用戶點(diǎn)擊上河圖中的商家，可以領(lǐng)取優(yōu)惠券。

標(biāo)題頁面的進(jìn)度條加載完畢后，用戶隨著鏡頭穿過云霧，來到清明上河圖中，左滑瀏覽，熙攘街頭有許多熱門店面，和零星分布的講解，以及人物對話框。店面包括外婆家，來伊份，麥當(dāng)勞，奈雪的茶，海底撈等100多個(gè)各類店鋪，店鋪上面有招牌，LOGO和廣告語；零星分布的講解內(nèi)容有超級品牌日，顧客對美食的感慨，蜂鳥配送，口碑直播等平臺(tái)活動(dòng)和服務(wù)內(nèi)容；人物對話有外賣員送餐，顧客取餐，老板感慨加入餓了么以后訂單很多等生活化內(nèi)容。用戶點(diǎn)擊喜歡的店鋪，查看大圖，有小二報(bào)出店名和歡迎詞，用戶可選擇進(jìn)店搶貨或繼續(xù)逛街。

還原清明上河圖的風(fēng)格，進(jìn)行手繪呈現(xiàn)，既有古風(fēng)美感，又有很多熟悉的現(xiàn)代美食店鋪羅列，點(diǎn)開后各個(gè)品牌均有優(yōu)惠可以領(lǐng)取，對用戶來說都是實(shí)打?qū)嵉氖″X，精準(zhǔn)迎合需求，同時(shí)很詳細(xì)的宣傳了平臺(tái)各方面的品牌優(yōu)勢和貼心服務(wù)。

案例名稱：秘密花園

案例品牌：餓了么X后浪出版公司《秘密花園》

該案例契合餓了么藍(lán)騎士的口號(hào)，與知名的涂色繪本《秘密花園》合作，將餓了么上可以點(diǎn)的商戶植入到秘密花園中，凸顯下午茶的概念，用戶可以看到藍(lán)騎士與用戶之間發(fā)生的故事，凸顯“愛什么來什么”的口號(hào)。

點(diǎn)擊打開作品，來到秘密花園風(fēng)格的橫屏界面，左滑屏幕查看畫作每部分的內(nèi)容，藍(lán)騎士為小朋友送來好吃的，為在公園看書的女生送來奶茶，為聚會(huì)慶生的女生們送來蛋糕，為求婚的男生送來花束。用戶點(diǎn)擊發(fā)光圖標(biāo)領(lǐng)取優(yōu)惠券。

還原《秘密花園》本來的色彩元素和手繪風(fēng)格，色彩豐富元素繁密，各個(gè)場景都很溫暖美好，又有生活氣息，都是生活中人們經(jīng)常遇到的外賣需求。

案例名稱：燃...燃起來了

案例品牌：新華社客戶端X新華社體育部X新華社技術(shù)局X新浪微博

全民健身時(shí)代，遠(yuǎn)離高熱量食物，用運(yùn)動(dòng)消耗卡路里，才能實(shí)現(xiàn)身材升級。參與新華社出品的足球游戲，了解運(yùn)動(dòng)，卡路里，與實(shí)物數(shù)量之間的換算，還可以用成績兌換獎(jiǎng)品哦！

初始界面有一位身著球服的胖男生背影，上方是標(biāo)題和該男子肥胖程度，下方是開始觸點(diǎn)，排行榜與游戲方法詳情。

點(diǎn)擊“運(yùn)動(dòng)有獎(jiǎng)”開始挑戰(zhàn)，男生大腳開球，向前奔跑，用戶點(diǎn)擊跑道讓運(yùn)動(dòng)員左右移動(dòng)，在奔跑時(shí)需要注意足球位置，及時(shí)挪去帶球，同時(shí)接住水，避開高熱量食品和裁判，接住水可以保持左上角身體含水量進(jìn)度條不枯竭，接住高熱量食品會(huì)抵消減掉的卡路里，沒有及時(shí)接回球和沖撞裁判會(huì)導(dǎo)致游戲結(jié)束，奔跑一定距離后男子身材會(huì)變瘦一個(gè)等級。

案例名稱：東京奧運(yùn)會(huì) 金牌大挑戰(zhàn)

案例品牌：人民日報(bào)新媒體 x 中國移動(dòng) x 咪咕

這是人民日報(bào)新媒體聯(lián)合中國移動(dòng)、咪咕制作的H5案例，旨在傳遞奧運(yùn)精神，通過互動(dòng)H5游戲的形式讓用戶體驗(yàn)不同運(yùn)動(dòng)項(xiàng)目的趣味。

加載成功后，用戶可以在首頁看到九種不同的運(yùn)動(dòng)項(xiàng)目金牌，只要點(diǎn)擊自己感興趣的項(xiàng)目金牌，即可體驗(yàn)該運(yùn)動(dòng)項(xiàng)目的線上比賽；頁面跳轉(zhuǎn)后，用戶可以在游戲起始頁了解運(yùn)動(dòng)項(xiàng)目的規(guī)則、歷史以及中國運(yùn)動(dòng)員最早在該項(xiàng)目取得的成就，點(diǎn)擊“我要挑戰(zhàn)”了解線上比賽的規(guī)則和比賽方法，在倒計(jì)時(shí)后開始比賽，結(jié)束后會(huì)根據(jù)你的比賽成績，為你頒發(fā)金牌、銀牌、銅牌、謝謝參與四個(gè)獎(jiǎng)項(xiàng)，用戶可以在頒獎(jiǎng)頁面直接保存海報(bào)，也可以分享到朋友圈，如果對成績不滿意，可以點(diǎn)擊“再次挑戰(zhàn)”。

整個(gè)案例操作簡單，游戲也具有反復(fù)參與性，九種不同的運(yùn)動(dòng)項(xiàng)目包含全面，有些是用戶平時(shí)很難接觸到的，通過游戲體驗(yàn)是一種很新穎的方式，也能夠增強(qiáng)用戶對該項(xiàng)目真正的運(yùn)動(dòng)體驗(yàn)的好奇心。

案例名稱：我們能一起看奧運(yùn)么？

案例品牌：人民體育&騰訊看點(diǎn)&QQ瀏覽器

選擇自己最喜歡的奧運(yùn)項(xiàng)目，發(fā)給好友，考驗(yàn)?zāi)酢?/p>

點(diǎn)擊打開作品，在紫色系分框圖中點(diǎn)擊自己最喜歡的奧運(yùn)項(xiàng)目，選五個(gè)，被點(diǎn)擊的項(xiàng)目圖片會(huì)從紫色系變?yōu)椴噬?，右下角有已選數(shù)量，點(diǎn)好后，用戶可選擇“就這樣猜”看看自己和誰最默契，或選擇“我來出題”，然后發(fā)給好友讓好友猜，最后用戶可查看自己的選擇，和登陸QQ瀏覽器查看奧運(yùn)主題版塊。

色彩統(tǒng)一，每個(gè)項(xiàng)目都有相關(guān)配圖，讓用戶瀏覽起來有畫面感，從而選出自己的最愛。被選項(xiàng)目會(huì)變成別的顏色，視覺突出，方便用戶回顧。

案例：新生代返場 升級新可能

品牌：網(wǎng)易云音樂 X adidas

開學(xué)季在即，如果給你個(gè)機(jī)會(huì)重回校園，你會(huì)是老師同學(xué)心目中怎樣的學(xué)生呢？帶上adidas新裝備，一起重溫校園時(shí)光吧！

選擇自己的身份，學(xué)生，畢業(yè)多年，或已為人父母，開始答題，包括書包里的東西，喜歡坐的位置，對一段音樂的聯(lián)想，感興趣的新課和如何回復(fù)小紙條，輸入姓名，選擇性別，生成海報(bào)，包括你所屬的學(xué)生類型，頭腦王者，學(xué)霸或暖心班長等，以及相關(guān)分析，用戶可點(diǎn)擊觸點(diǎn)登陸相關(guān)平臺(tái)。

校園類作品，顏色清新活躍，畫風(fēng)青春洋溢有活力，插圖上的人物都身著阿迪達(dá)斯服飾，加深用戶對品牌的印象，和感受品牌服飾對青春氣質(zhì)的加持。除了上課下課這樣的上學(xué)正規(guī)流程，作品還融入了傳紙條，打球，零食這些學(xué)生時(shí)代最喜歡的趣味，引發(fā)美好回憶。

案例名稱：biubiubiu

案例品牌：新華社技術(shù)局&新華社客戶端&新華社體育部出品

新華社出品，用戶在作品中感受射擊樂趣，通過三關(guān)，即可參與抽獎(jiǎng)，挑戰(zhàn)體育項(xiàng)目，呼應(yīng)奧運(yùn)主題。

首頁有獎(jiǎng)牌數(shù)，五星紅旗和個(gè)人最高分，用戶可選擇音效是否打開，查看排行榜和開始游戲，游戲開始后，上方是30秒倒計(jì)時(shí)，目標(biāo)38環(huán)，中間是瞄準(zhǔn)星和靶子，滑動(dòng)左下方的觸點(diǎn)瞄準(zhǔn)，點(diǎn)擊右方射擊，靶子上會(huì)出現(xiàn)擊中的環(huán)數(shù)和槍眼，上方目標(biāo)欄跳至相應(yīng)剩余環(huán)數(shù)，完成38環(huán)后進(jìn)入下一關(guān)，靶子會(huì)變小或晃動(dòng)，三關(guān)后，總成績和獎(jiǎng)杯出現(xiàn)，點(diǎn)擊抽獎(jiǎng)。

作品界面很簡潔，瞄準(zhǔn)星視角，讓用戶專注射擊，在嚴(yán)肅的背景音樂下感受緊張的比賽氣氛。

其他案例：2021最新H5案例合集（一）