H5解析 | 3个套路就能制作如此火爆的“一镜到底”H5

原创 2017年10月24日 09:28:12

一镜到底形式的H5是现在很受欢迎的一种营销玩法,通常是在h5页面中通过模仿镜头的拉伸,使得不同的画面元素陆续呈现在观众眼前的一种表现方式。在H5页面不剪,画面不切的情况下,做到一气呵成的浏览效果。对于这种酷炫的H5视觉玩法,在内容展示以及吸引用户眼球方面,都可以说有着非常强力的作用。




那么今天就给大家来分析下“一镜到底”型的H5案例到底有哪些制作方式。首先一镜到底类型的H5有一下几种类型:



一、长页图:

表达方式就是简单的上下左右滑动,在整个过程中将其他元素融入滑动,能让作品更加立体,摆脱只有文字的枯燥。视差动画一镜到底的结合,让故事的传达更加直接明了,无论是视觉效果还是趣味性,都非常出彩,故事内容丰满,逻辑清晰,可读性强


代表案例:逃不掉的四字魔咒

品牌主:网易

点击这里立即体验案例


横向滑动的一款长页图H5案例。案例讲述一个人回忆起从小到大,在家庭、学校、职场等各种地方,所遭遇的各种“四字魔咒”每个年龄段对应不同的内容。



案例场景大多是夜晚。横向滑动配合视差效果,展示了与众不同的动画效果,这种长图场景是由canvas绘制整个场景的。动画元素是由换图的方式形成动态效果。再根据滑动距离坐标绘制出不同的图画。



滑动时的缓冲效果,让案例很有线条感,给了用户很好的交互体验。动画使用js做了硬件加速,随着“主角”头发慢慢变白、脱下,步入老年,画面也到达结尾页,最后用户可以“点击观看”下载网易新闻客户端,也可以选择“再看一遍”。


代表案例:节气奇妙物语

品牌主:in

点击这里立即体验案例


这款由“in”推出的H5案例,手绘的画面,与清新的画风。长按屏幕,体验到一镜到底+镜头平移的视觉形式,划着小船从春风走到立秋,感受四季美如画的风景。将四季的变化都呈现在这里。




进入首屏,提示左滑开始启程。长按交互和动画(按钮是根据触摸事件,按下按钮就会移动长图达到滑动效果),透过一团云雾到达一片山水,用户长按按钮就可以让船夫和小船在山水间穿行。画面中的部分元素都是CSS3动画位移形成动态效果,在视觉上表现很有活力。同时屏幕上显示出现节气名及物语。




结尾显示“节气物语,未完待续...”,点击“持续故事”来到活动页,原来是节气插画征集活动,画出你的喜欢的节气插画,为四季增添一丝美。用户可以上传作品参加评选。



 二、场景穿梭-(画中画形式感):

大缩小或者由小放大,感觉是在一个空间里面,通过镜头的穿梭突显出所述事件。在立体空间中,不同的穿梭形式,也有其更为合适的技术融合。


代表案例:致七夕

品牌主:网易新闻

点击这里立即体验案例


手绘漫画的设计风格,从视频镜头一个放映机开始展现一镜到底内容,将5部经典电影中的经典场景桥段展示。



案例中模拟摄像机的界面,给案例增添了一丝年代感,一镜到底的展现形式也让案例内容的过度更具线条感



结尾页随机文案,选择“重写结局”来重选一句文案,跳转下载网易新闻客户端。



代表案例:一口气看尽职场套路

品牌主:汤臣倍健

点击这里立即体验案例


采用画中画的展现职场中的老套路,串联起职场上的种种套路。中间夹杂着搞笑和幽默的风格



这款案例也可以说是长屏切换的h5,动态效果是不断换图制作,再以CSS3代码缩放形成,每段场景中的文字也是由CSS3代码控制移动,最后背景则是PNG图片。



整个案例搭配着搞笑的解说和很有节奏感的音乐特效,意境十足。



 三、多元化交互长镜头:

一个场景、一段内容进行连续拍摄,形成一个比较完整的镜头段落,不去打断时间呈现一个自然过程,实现空间的自然转换,在交互方面的自由度也更大,实现局部与整体的联系。


代表案例:为#潮起潮不落#而来,别说你不期待

品牌主:斯凯奇

点击这里立即体验案例


随着一盘磁带的转动,来到首屏,画面上是一个老电视机,点击电视可以播放活动视频。随着用户上下滑动屏幕,镜头会拉远或拉近,整体画面会向前移动,并伴随动画效果。



整个案例是以一张张的帧图切换而形成,视觉效果上的镜头拉远或拉近凸显出一镜到底的效果



画面中的磁带、老电视机、灯笼、霓虹灯等元素均是在一张图上,到不同位置即切换到不同的图片形成动画效果。各处的细节表现还是很不错。



小结:以上这些一镜到底H5案例,大家的眼球是否被刺激了一番呢?其实对于没有任何制作设计经验的企业和品牌主们来说,想要制作一镜到底的H5案例其实并不难的。今天的解析就为大家讲到这,要是各位品牌粑粑们也想制作这种惊艳眼球视觉特效的话,我们型科就有的定制哦,您只需说出您的要求与想法就好啦。



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yylurex/article/details/78325896

大学生中走出的“不就业族”

大学生中走出的“不就业族”  大学生中不急于就业者增多  在绝大多数大学毕业生为找到一份合适的工作而奔波苦恼时,上海高校的毕业生就业市场上却出现了奇怪的一幕:一些毕业生对就业说“不”。  据了解,这些...
  • stanely
  • stanely
  • 2001-06-04 16:56:00
  • 1406

12个超酷H5源码

  • 2015年12月18日 11:26
  • 15.44MB
  • 下载

Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探

原文出处:http://www.cnblogs.com/xufeiyang/articles/3181369.html 什么是Three.js three.js是JavaScript编写的We...
  • LateChangce
  • LateChangce
  • 2016-07-13 01:56:24
  • 2657

Three.js打造H5里的“3D全景漫游”秘籍

近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。   QQ物联与深圳市天文台合作,在手Q“发现新设...
  • laokdidiao
  • laokdidiao
  • 2016-04-16 19:29:40
  • 17708

H5解析 | 3个套路就能制作如此火爆的“一镜到底”H5

一镜到底形式的H5是现在很受欢迎的一种营销玩法,通常是在h5页面中通过模仿镜头的拉伸,使得不同的画面元素陆续呈现在观众眼前的一种表现方式。在H5页面不剪,画面不切的情况下,做到一气呵成的浏览效果。对于...
  • yylurex
  • yylurex
  • 2017-10-24 09:28:12
  • 2290

H5解析|如何做“穿上军装”现象级爆款H5,分析完这些你就懂了

本期案例简介:H5的玩法不断增加,新的H5玩法也是越来越炫酷,更多的新元素融入到H5中。今天就给大家深度解说一下最近这些火爆而炫酷的H5到底是怎么样的新玩法和技术来吸引人的,让大家在做案例参考的时候能...
  • yylurex
  • yylurex
  • 2017-08-16 12:06:46
  • 2282

一镜到底,看看波士顿动力的机器人家族到底有多「变态」

整理 | 王艺 今天刷屏的波士顿动力人形机器人视频不知道你看了没?没看的话请戳:...
  • Uwr44UOuQcNsUQb60zk2
  • Uwr44UOuQcNsUQb60zk2
  • 2017-11-19 06:32:37
  • 230

教你一招让你高效搞定高品质的H5交互动画

一般在H5开发流程中,都是交互动画设计师利用Animate cc(即原来的Flash)把动画的原型设计出来,然后交付给UI部门进行开发实现效果。而做过动画开发的UI都知道搞动画开发是较为耗时费力的,而...
  • yylurex
  • yylurex
  • 2017-05-08 15:58:12
  • 3260

自带3D全景漫游神技能的H5是如何炼成的

如今基于HTML5的各式移动互动页面(即常说的H5)加入了越来越多的新技术,比如VR虚拟现实现实,就是最近风口上的大热门H5技术,下面分享一下如何基于HTML5来实现这一效果。 ...
  • yylurex
  • yylurex
  • 2017-05-08 17:06:39
  • 1050

最新劳动节H5营销案例合集_10个劳动节h5创意参考

5.1劳动节,如何用H5活动圈粉。劳动、劳模、加班、维权这些关键词可作为节日创意传播的立足点,10个案例推荐希望能帮到各位小主。 【1】一齐劳动最光荣 把刮刮乐和集...
  • yylurex
  • yylurex
  • 2017-04-11 15:05:40
  • 2064
收藏助手
不良信息举报
您举报文章:H5解析 | 3个套路就能制作如此火爆的“一镜到底”H5
举报原因:
原因补充:

(最多只允许输入30个字)