初探什么是技术性H5广告?

看了那么多呆板的翻页式H5广告,你会不会对技术性H5特别好奇,想要看看究竟有何特别之处!小编也非技术出身,对代码认识仍在初学阶段,那么就让我试着带



看了那么多呆板的翻页式H5广告,你会不会对技术性H5特别好奇,想要看看究竟有何特别之处!小编也非技术出身,对代码认识仍在初学阶段,那么就让我试着带大家入门,一起来初探这些技术性H5吧!

作者:苏杭SH

本文转载自微信公号:H5广告资讯站

(友情提示:这组作品加载普遍超级慢,看官要找个wifi稍微耐心下)


《星际传奇:这是探索宇宙的门票》


相信第一次看到这支H5的群众们都会被华丽丽的画面给震撼到,在大呼过瘾的同时,你可能会很纳闷这炫酷的动画是怎么给丢到网上的?怎么实现的?

扒开代码才知道,这是通过序列帧和canvas动画完成的一支H5广告。用前端的牢骚话说就是:效果简单,干的是力气活!看了那么多序列帧动画,这支内容量的确不小,内置的pug图片快到了400张!每张图片都需要一个请求,才能从服务器端拉取到本地。但是,优化方面做的确十分出色,体量控制在了6m以内,从目前的效果来说,已相当了得!

而这支H5的技术性则主要体现在了序列帧前期的动画合成阶段,利用了大量特效软件来制作出带有粒子特效、三维漫游的星级穿越的动画效果!可以说,一般意义上的平面设计师就只能看看了,你也可以理解为,H5广告为跨界带来了很多可能。





《百度钱包:会议邀请函》


这支H5广告在视觉效果上同样带有极为炫目的表现力,而在呈现方法上和《星际传奇:这是探索宇宙的门票》异曲同工,把尽头都用在了序列帧前。

虽然这两支H5广告效果突出,但是其缓慢的加赞和部分机器性能的限制,使得它无法达到最佳的传播性!

实际这么做H5广告也可以看做是在技术不成熟期的一种野蛮打法!就好比你用ps画个3D效果的立体字一样,创造者为了实现他们心中的目标,只能利用这种方式来打硬仗了!他们,是我们伟大的领路人!

那么,真正的技术性H5应该是什么样子那?




《康师傅新年H5广告》


看到这支H5的时候,会不会觉得眼前一亮!感叹到,原来H5还可以做成3D的展现效果,实际不止如此,html5定稿后的一个巨大潜力就是其强大的3D绘制功能,有别于canvas和序列帧的搭配,H5广告的3D功能利用到了webGL加贴图的更为高级的3D编写方式,将工作重心前移到了前端,也绝对意识上拉开了同常规H5的技术差别。

目前来说,对于Html5 3d动画的实现还比较复杂。在如今,前端稀缺的行业来说,想看到更多这样的案例,仍然需要时间的积累。





《AKQA圣诞节宣传H5》


虽然已经时隔大半年,但是这支H5依然是我目前为止,见过的最为成熟的技术性H5作品。本来webGL就已经是高级玩法,而相比康师傅的新年H5,这支H5广告的画面更为细腻,体验更为流程,其代入感也更加引人入胜!

有人可能会不经感慨,为什么国外的H5广告能做到如此水准,而国内的H5 广告仍然是翻幻灯片哪?实际,并不是开发者们没有这样的技术,而是因为我们要照顾那些低端机的性能和普遍落后于发达国家的网络速度。众多开发者,为了传播的流程不得不牺牲掉很多性能,这是现状!

而《AKQA圣诞节宣传H5》更大的意义在于,用一种更为直观的方式告诫你,H5广告可以做到什么,H5广告的未来将会怎样!




实际苏泊尔的《谁先住进你新房?》和京东的《宇宙奇妙市集》都是技术性H5的优秀案例,但是似乎官方服务器出现了问题,现在无法登陆分享!我们也只好再等等了。

我相信,性能化的H5 会随着幻灯片式H5 的普及而逐步壮大,我们在未来会看到更多优秀的作品和案例,而伴随着各种辅助引擎的开发和应用,canvas和webgl的技术应用也将会逐步深入。未来我们还将会看到更多优秀的作品~


End.




【互动大师&UI中国 ▏第一届H5创意大赛】详情,请点击“”

↓↓↓↓↓↓