耐克、阿迪的互动广告帅爆了！（案例+分析全解读）
最近平台琐碎活动终于结束，终于可以安心写一期技术贴了！记得去年小呆的《探究技术性H5 上》在互联网的到了好评和关注，而这次小呆会为你带来该系列的下集！分析和结论将会更为深入，下面就开始吧～
（特别强调：我们的内容常被同行盗用和搬运，希望尊重劳动！转载需要平台授权！）
我们本次将会列举三个最近特别受关注的技术性H5广告：
案例1: Activation Group 祝你有一个璀璨羊年
实际很多人并不知晓，在14年初，有一批技术惊艳的H5广告已经出现，并带有及其炫酷的效果，就像是这支跨年广告：
所有人看过的第一反应就是，哇！太牛逼了！然后就又郁闷了，这玩意儿怎么弄出来的？好想知道！！！
利用开发者工具的分析截图
从效果看，这支H5最不可思议的点实际上有三个：生成任意文字、烟花效果、三维空间 实际这也是定制化H5所具备的特征
1.任意数字生成：这里小呆就简单给你引入一个算法概念，当展现需要表现某个变量，我们就需要一个公式，就像是高中数学课学的那种公式，只不过现在换成了代码，而案例中字的输入转化效果就靠得公式。
2.烟花效果：我们平时做海报，很多元素是在素材网站上找得，自己做太耗费时间，而像H5的诸多炫酷效果同样如此！像是这个烟花效果就取材于three.js，利用该素材库的粒子效果修改而来。
3.三维空间：实际前端的世界里同样有着平面和空间两个领域，会用到两套不同方式，像是PS和3DMAX的不同，而前端的三维一般都会用到webGL,而这支作品就是如此。
照这么说，这支H5也没那么难，只要有熟悉相应操作的程序员，就能干起来！而在这些炫酷特效背后，真正让我惊讶的是下面这组数据！
小呆看到所有元素的罗列后，发现本H5的总体量只有区区的4.9K!!!!!
和那些10多MB的H5相比，这意味着非常快的加载和更好的传播和推广，而这就是完全用代码编辑而不使用多图的超大好处！
然而，现实又是那么残酷！国内市场和开发者开了个大玩笑，在测试时我们发现这支H5在安卓上得表现简直令人发止！！卡得要哭歪了！！由于安卓预览器性能不及IOS，所以像是这种烧性能的表现形式，随体量较小，但在国内实战传播上得分偏低，所以我们认为这是一支华而不实的H5广告。
案例2: 每双球鞋都有一个故事
这是一支非常有代表性的技术性H5广告，资讯站也曾经将其选定为2015年国内最具技术性的H5广告！而它究竟是如何实现的那？
（在订阅号回复“年总”观看15年最佳H5广告）
和案例1相比，该作品不仅同样借用3D空间，而且还有那么多可以操作的3D模型，第一次就亮瞎了小呆的双眼，体验大呼过瘾！
而这炫酷的三维场景，我现在知道是利用wedgl编辑的，但是这模型怎么来得？用代码一个个画的，不会吧？怎么画？？？
和案例1类似，耐克这支广告同样利用到了three.js库，H5中的不少效果和体验可以说是从素材库中抓取修改的。而这些独立的模型原则上来说是可以通过前端语言来绘制的，但这会耗费你太多精力，俗话说就是不划算呀！而就这支案例来说，内部模型实际是通过像是SketchUp（从效果上的判断，类似软件实际有很多）这样的3D软件先绘制好后，通过工具导入到H5的。
球鞋模型展示图
然后再通过代码来标记这些模型，加上各种移动效果，可以说用的是巧劲，就像是设计师做一套VI，网上能找到很多模板来套用，而前端在执行H5的时候也有很多相应的素材来使用，有时候你水平的高低，拼的就是长期素材积累积累和对广告含义的理解！
这里有一个很有趣的细节，每个模型在连接时，我们可以看到它在渲染的一个效果，而这可以简单理解为是为流畅体验的一种设计，但又很巧妙的营造出了一种有趣的视觉过度。
本案例在去年被我们亲爱的腾讯体育赤裸裸的借鉴了！好木有节操！如果你特别想知道内情，在订阅号回复“篮球”给你看这篇内容。
本作品由于引用了不少贴图和图片素材，最后的总体量在3.6MB,这是一个目前市场H5比较理想的大小，而且它承载的又是如此丰富的场景表现，由于优化到位，该作品在安卓和苹果的测试上也较为流畅，可说是2015年一支极具代表性的上成之作。
案例3: 胜势全开
当我愚蠢认为一切都有定数时，看到了这支H5！在兴奋之余，也刷新了我对技术和表现力的全新认知。案例如下：
有没有觉得这支H5真能一瞬间给你身临其境的参与感，画面极为精美，让人不停的想去回味。
到底用了什么牛逼的技术，表现力这么好！当我们扒开代码，一条条分析时，程序员笑了，小呆我也笑了...
整个H5没有用到任何相应的代码库，使用的是最常规的标记语言，而作品所呈现的3D操作也仅仅是用CSS3变换属性来实现的，可以说是不折不扣的伪3D，一点技术含量都木有！！
利用MAC的CHROME开发者工具模拟移动端左40度的展示效果
利用MAC的CHROME开发者工具模拟移动端右40度的展示效果
左右摇摆手机的效果
整个作品的所有元素全是图片，也就是程序最看不上的元素，而在开发当初，该作品设计层面的演示效果一定做的非常完整，我甚至会误认为开发和设计是一个人，不然这种协调很难达成。
过场动画演示
过场动画截图
细心的同学会发现，这堆密密麻麻的链子很类似，实际只用到6张素材图，然后不断的复制变换，而烈火灼烧的球鞋，猴王的石像，带球准备冲锋的球员，他们分别是不同的图片。为迎合伪三维骗术，在前期修图上做上了明暗变化并且统一了光源，修图的难度甚至比技术还要高一些。而最终的效果却让人大呼过瘾，尽显逼格！
整个H5体量控制在了2MB以内，如此的体积搭载如此效果，并且因为代码层级的基础和简单，使得这支作品在安卓和苹果都有较好的体验，可以兼容大部分设备。最终让这支广告在视觉、交互、声效、广告性、整体体验、设备兼容上做到了非常难得的高度统一，小呆只想用“专业”这个词来形容开发者，别的也没什么好说了。
我们初探到这里也将结束这个主题了，从伪特效到真特效，从特效到高级技术，从高级技术再回到伪特效，我们用了7个案例，两篇帖子，对何为H5最好的表现技术做了非常有趣的初探，在一个循环后我们惊奇的发现，真正好的H5广告它需要的是对市场、用户以及受众的了解。而是否能够打动用户，单单靠高能技术是不靠谱的，它更需要各个环节的统一和协调，而专业性就恰巧体现在这个环节。（在订阅号回复“上”给你看上集或看今天第二条推送）
谢谢你一直以来的认可，我们本着爱好和分享的精神为你们做高质量的内容，希望可以获得你的赞赏！本期的内容就到这里了，咱们下期见了！
—想更了解H5 请加小编微信：kuzhanh5（拉你入群）—
想要更了解H5 请加小编微信：kuzhanh5（拉你入群）