H5解析 | 這些爆火的“一鏡到底”H5都用了什么套路？
數英網用戶原創，轉載請遵守底部規范！
一鏡到底形式的H5是現在很受歡迎的一種營銷玩法，通常是在h5頁面中通過模仿鏡頭的拉伸，使得不同的畫面元素陸續呈現在觀眾眼前的一種表現方式。在H5頁面不剪，畫面不切的情況下，做到一氣呵成的瀏覽效果。對于這種酷炫的H5視覺玩法，在內容展示以及吸引用戶眼球方面，都可以說有著非常強力的作用。
那么今天就給大家來分析下“一鏡到底”型的H5案例到底有哪些制作方式。首先一鏡到底類型的H5有一下幾種類型：
一、長頁圖：
表達方式就是簡單的上下左右滑動，在整個過程中將其他元素融入滑動，能讓作品更加立體，擺脫只有文字的枯燥。視差動畫與一鏡到底的結合，讓故事的傳達更加直接明了，無論是視覺效果還是趣味性，都非常出彩，故事內容豐滿，邏輯清晰，可讀性強。
1、代表案例：逃不掉的四字魔咒
品牌主：網易
橫向滑動的一款長頁圖H5案例。案例講述一個人回憶起從小到大，在家庭、學校、職場等各種地方，所遭遇的各種“四字魔咒”每個年齡段對應不同的內容。
案例場景大多是夜晚。橫向滑動配合視差效果，展示了與眾不同的動畫效果，這種長圖場景是由canvas繪制整個場景的。動畫元素是由換圖的方式形成動態效果。再根據滑動距離的坐標繪制出不同的圖畫。
滑動時的緩沖效果，讓案例很有線條感，給了用戶很好的交互體驗。動畫使用js做了硬件加速，隨著“主角”頭發慢慢變白、脫下，步入老年，畫面也到達結尾頁，最后用戶可以“點擊觀看”下載網易新聞客戶端，也可以選擇“再看一遍”。
掃描二維碼，立即體驗！
（數英網APP用戶需點擊放大二維碼，長按識別）
2、代表案例：節氣奇妙物語
品牌主：in
這款由“in”推出的H5案例，手繪的畫面，與清新的畫風。長按屏幕，體驗到一鏡到底+鏡頭平移的視覺形式，劃著小船從春風走到立秋，感受四季美如畫的風景。將四季的變化都呈現在這里。
進入首屏，提示左滑開始啟程。長按交互和動畫（按鈕是根據觸摸事件，按下按鈕就會移動長圖達到滑動效果），透過一團云霧到達一片山水，用戶長按按鈕就可以讓船夫和小船在山水間穿行。畫面中的部分元素都是CSS3動畫位移形成動態效果，在視覺上表現很有活力。同時屏幕上顯示出現節氣名及物語。
結尾顯示“節氣物語，未完待續...”，點擊“持續故事”來到活動頁，原來是節氣插畫征集活動，畫出你的喜歡的節氣插畫，為四季增添一絲美。用戶可以上傳作品參加評選。
掃描二維碼，立即體驗！
二、場景穿梭-（畫中畫形式感）：
由大縮小或者由小放大，感覺是在一個空間里面，通過鏡頭的穿梭突顯出所述事件。在立體空間中，不同的穿梭形式，也有其更為合適的技術融合。
1、代表案例：致七夕
品牌主：網易新聞
手繪漫畫的設計風格，從視頻鏡頭一個放映機開始展現一鏡到底內容，將5部經典電影中的經典場景橋段展示。
案例中模擬攝像機的界面，給案例增添了一絲年代感，一鏡到底的展現形式也讓案例內容的過度更具線條感。
結尾頁隨機文案，選擇“重寫結局”來重選一句文案，跳轉下載網易新聞客戶端。
掃描二維碼，立即體驗！
2、代表案例：一口氣看盡職場套路
品牌主：湯臣倍健
采用畫中畫的展現職場中的老套路，串聯起職場上的種種套路。中間夾雜著搞笑和幽默的風格。
這款案例也可以說是長屏切換的h5，動態效果是不斷換圖制作，再以CSS3代碼縮放形成，每段場景中的文字也是由CSS3代碼控制移動，最后背景則是PNG圖片。
整個案例搭配著搞笑的解說和很有節奏感的音樂特效，意境十足。
掃描二維碼，立即體驗！
三、多元化交互長鏡頭：
對一個場景、一段內容進行連續拍攝，形成一個比較完整的鏡頭段落，不去打斷時間呈現一個自然過程，實現空間的自然轉換，在交互方面的自由度也更大，實現局部與整體的聯系。
1、代表案例：為#潮起潮不落#而來，別說你不期待
品牌主：斯凱奇
隨著一盤磁帶的轉動，來到首屏，畫面上是一個老電視機，點擊電視可以播放活動視頻。隨著用戶上下滑動屏幕，鏡頭會拉遠或拉近，整體畫面會向前移動，并伴隨動畫效果。
整個案例是以一張張的幀圖切換而形成，視覺效果上的鏡頭拉遠或拉近凸顯出一鏡到底的效果。
畫面中的磁帶、老電視機、燈籠、霓虹燈等元素均是在一張圖上，到不同位置即切換到不同的圖片形成動畫效果。各處的細節表現還是很不錯。
掃描二維碼，立即體驗！
小結：以上這些一鏡到底H5案例，大家的眼球是否被刺激了一番呢？其實對于沒有任何制作和設計經驗的企業和品牌主們來說，想要制作一鏡到底的H5案例其實并不難。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
全部評論（1條）