一大波優(yōu)秀的海外 H5，讓你感受到逼格滿滿！
說實(shí)話，現(xiàn)在H5在國內(nèi)那么風(fēng)靡,殊不知國外H5也是逼格滿滿,歪果仁超級會玩,不是技術(shù)派就是藝術(shù)家,10個(gè)案例，雙手奉上！
注：部分 H5 載入較慢，建議翻墻以獲得更流暢完整的體驗(yàn)。
原標(biāo)題：『國外H5』打起精神，看歪果仁如何做出逼格滿分的「H5」！
數(shù)英網(wǎng)用戶原創(chuàng)文章，轉(zhuǎn)載請聯(lián)系本人
國外 x 創(chuàng)意H5 x 互動營銷
國外優(yōu)秀H5 1
Because Music：十周年音樂紀(jì)念網(wǎng)站
亮點(diǎn)：2015FWA“年度最佳網(wǎng)站”
小編有話說：the Favourite Website Awards 這個(gè)網(wǎng)站，每年都會評選“最佳網(wǎng)站”，也是不少創(chuàng)意人士的靈感源地。這個(gè)作品就是去年的大獎，網(wǎng)站用非常無厘頭的方式展現(xiàn)了Because Music旗下音樂人的專輯及音樂?！坝腥さ幕芋w驗(yàn)”、“內(nèi)容充實(shí)但不花哨”，是小編體驗(yàn)后的感受。進(jìn)入網(wǎng)站，長按按鈕隨機(jī)出現(xiàn)歌手，例如上面這個(gè)圖，你需要互動才能播放音樂，這里的互動方式污污，需要你不停拿掉男神下半身的“遮羞布”，同時(shí)在互動頁面，你還可以下載音樂，也可以跳到歌手主頁。
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
國外優(yōu)秀H5 2
Way to Go：紙片人冒險(xiǎn)之旅
亮點(diǎn)：2015FWA“人民選擇獎”
小編有話說：這個(gè)作品則是去年FWA的“人民選擇獎”，同“年度最佳網(wǎng)站”是全場的最大獎項(xiàng)。這個(gè)網(wǎng)站類似創(chuàng)意者的聚合地，你可以寫博客、搜尋創(chuàng)意人、看新聞、看圖片……首頁的交互體驗(yàn)更是酷到炸，你瞬間變成第一視角的紙片人，用鼠標(biāo)控制方位，在森林里行走、在高空滑行，可以全景729度觀察周遭的一切，這種逼真的VR體驗(yàn)讓人仿佛真在原始森林一樣。
國外優(yōu)秀H5 3
belVita：Morning Win小游戲合集
亮點(diǎn)：15個(gè)晨間小游戲
小編有話說：烘朗作為一款早餐餅，不僅想在早餐時(shí)占據(jù)用戶的胃，還想占據(jù)用戶的手眼腦耳，野心真夠大的！這款叫Morning Win的游戲合集由15個(gè)小游戲組成，play yoga、play dog、play card……都是輕量級不燒腦的小游戲，而且和晨間場景很搭，適合吃早餐或者通勤在路上玩，合集的設(shè)置也讓用戶暫時(shí)不會拋棄，在時(shí)間持續(xù)度上有保證，再配合社交媒體上的campaign策略，刷個(gè)屏也不是難事。品牌軟性植入在游戲的各個(gè)場景中，用戶不知覺的就接受了產(chǎn)品和品牌，一舉兩得的事情哪個(gè)品牌主會不愛呢？
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
國外優(yōu)秀H5 4
Silik：家居產(chǎn)品移動展示
亮點(diǎn)：分段加載技術(shù)
小編有話說：這個(gè)H5作品品牌主來源于Silik，一個(gè)高端意大利家居品牌。整個(gè)H5圍繞Silik三個(gè)系列的產(chǎn)品展示，剛開始的動畫著實(shí)驚艷，飛鳥的效果應(yīng)用了粒子動畫技術(shù)，視覺感超強(qiáng)，播放流暢。值得一提的是，由于H5文件過大，作品采用了分段加載的技術(shù)，進(jìn)入首頁時(shí)在用戶未選擇系列章節(jié)時(shí)，動畫并沒有加載，當(dāng)用戶選擇時(shí)，被選擇的章節(jié)才會加載播放，這就節(jié)約了等待時(shí)間，提高了用戶體驗(yàn)，減少了跳失率。在產(chǎn)品展示環(huán)節(jié)，動畫也做的相當(dāng)細(xì)膩，滑動手指，在觀看產(chǎn)品的同時(shí)，還有烘托場景的小動畫在周圍渲染，這里應(yīng)用的是關(guān)聯(lián)動畫技術(shù)。
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
國外優(yōu)秀H5 5
In Pieces：保護(hù)瀕危物種
亮點(diǎn)：極簡的折紙風(fēng)格
小編有話說：這個(gè)H5是一個(gè)倡導(dǎo)保護(hù)瀕危動物的公益作品，用棱角分明，極具視覺沖擊感的折紙風(fēng)格構(gòu)建30個(gè)瀕危物種，獅子、魚、鳥……，這種設(shè)計(jì)風(fēng)格透露著急迫的情緒：保護(hù)瀕危動物刻不容緩，整體畫面給人以干凈、簡潔之感，而且畫面整體動物居中，焦點(diǎn)明顯，主題十分鮮明。交互上，點(diǎn)擊右上方的按鈕可以前后切換，點(diǎn)擊左上方的圓形按鈕可以瀏覽30個(gè)物種的具體名稱；動畫上全程采用CSS3完成，轉(zhuǎn)場過渡用粒子動畫完成，評估工作量很大，設(shè)計(jì)團(tuán)隊(duì)真是下了苦功。
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
國外優(yōu)秀H5 6
標(biāo)致：Peugeot Catch the Dragon
亮點(diǎn)：3D立體模擬實(shí)境
小編有話說：這個(gè)是標(biāo)致為旗下一款新產(chǎn)品做的移動推廣，創(chuàng)意點(diǎn)圍繞著追逐火龍展開，用戶可以通過兩種方式：VR虛擬實(shí)境和360度全景加入，前者分雙屏，如果有眼睛3D感覺很強(qiáng)，后者是全屏幕，但視覺感和體驗(yàn)同樣出色。用戶能體驗(yàn)到坐在駕駛室追逐的感覺，風(fēng)馳電掣，直道飆車，轉(zhuǎn)彎漂移，在手機(jī)上體驗(yàn)就能感受到這款車的優(yōu)越性能。技術(shù)上調(diào)用了手機(jī)內(nèi)置傳感器，用戶只要360度移動手機(jī)就能控制車體。
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
國外優(yōu)秀H5 7
Make Me Pulse：2016 Make Me Pulse
亮點(diǎn)：H5特效庫
小編有話說：這個(gè)是Make Me Pulse品牌在2016年度的移動品牌廣告，在小編看來，簡直就是一個(gè)超酷的H5特效素材庫！開啟動畫，長按按鈕，屏幕會陸續(xù)出現(xiàn)7個(gè)詞匯：Work、Dream、Think、Strive、Imagine、Pulse、Pround，停止長按會隨機(jī)出現(xiàn)一個(gè)單詞，并出現(xiàn)一種H5特效，如畫布收縮、水波紋理、3D旋轉(zhuǎn)等，特別酷炫，畫面結(jié)束頁，是品牌主在2016年的口號“WISH YOU THE BEST FOR 2016”。整體的創(chuàng)意簡單純粹，7個(gè)詞匯就是品牌的7個(gè)精神內(nèi)核，同H5動效完美結(jié)合，讓人印象深刻。
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
國外優(yōu)秀H5 8
Braintree：codeology
亮點(diǎn)：技術(shù)與藝術(shù)的完美融合
小編有話說：用一行行的girhub代碼生成一幅幅畫作，你能想象嗎？外國的設(shè)計(jì)師們不僅想到，而且還做到了！這種跨界的組合，實(shí)在腦洞大開，也讓人從另外一個(gè)層面上感受到代碼之美，原來它并不是沒有生命力的，一行行代碼炫動而耀眼，有一種說不清道不明的科技美學(xué)，谷歌、蘋果、facebook的網(wǎng)站都在其中，你還可以點(diǎn)擊左下方給該幅作品點(diǎn)贊，也可以在上方的搜索框手動輸入尋找你想看的網(wǎng)站。手機(jī)端打不開的童鞋，可以用PC打開，效果比移動端更震撼。
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
國外優(yōu)秀H5 9
France TV education：Le dernier gaulois
亮點(diǎn)：長卷軸電影分鏡腳本
小編有話說：這是法國教育電視臺為新劇上映做的H5宣傳。觀看時(shí)一定要打開聲音，旁白的法國男聲實(shí)在太好聽了，全立體聲道特別渾厚。整個(gè)移動網(wǎng)站的設(shè)計(jì)走的是法式浪漫，精致的油畫色調(diào)，讓人一看就忘不了的浪漫風(fēng)情，用戶只需要向下滑動，就能觀看故事，豎直長卷軸的設(shè)計(jì)，畫面過度零間隔，場景銜接上特別自然，用戶在觀看時(shí)很容易產(chǎn)生浸入式的體驗(yàn)，更容易與故事產(chǎn)生共鳴。
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
國外優(yōu)秀H5 10
全日空：ANA Planet
亮點(diǎn)：移動端星球大戰(zhàn)
小編有話說：這是全日空航空公司把自己的航線與星球大戰(zhàn)結(jié)合的一款移動端游戲，37個(gè)關(guān)卡，體量相當(dāng)于一個(gè)大型手游了。用戶需要在屏幕的提示下一個(gè)個(gè)闖關(guān)，每一個(gè)關(guān)卡的設(shè)置完全匹配星際爭霸里的元素和設(shè)置，星戰(zhàn)粉們完全淪陷了有沒有，而且畫面精美，聲音震撼，完全就是大片配置，當(dāng)用戶玩完全部游戲時(shí)也對全日空的航線摸得滾瓜爛熟，同時(shí)頁面底部還有社交平臺分享提示，玩家之家可以互相競技和比拼。這種廣告套路，小編太喜歡了，給101分！
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識別）
公眾號：拇指部落（微信ID：muzhibuluo）
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（3條）