6月是中国征象级H5爆发的期间，也是营销者利用聪慧“造假”，在形式和内容上进行创新的高峰期。以我的朋友圈为例，HTML5行业人士都在转发淘宝造物节的伪VR，“生手”的人们则会分享腾讯Next Idea的伪动画，大多数人好奇，“到底是怎么做的？！
”
它们如何欺骗我们的眼睛？
怎么如法炮制出相似的H5？
微信营销究竟暗藏什么行规？
1、“假装它是3D”
淘宝造物节H5在业内太火了，通过全景图、分层运动，在网页中布局出VR场景，还是动漫手绘风格的。由于它在朋友圈太火了，顺带还宣扬了背景音乐——华晨宇的新歌《造物者》——反正我是听了不下二十遍。然而，你以为它真的用WebGL做了3D殊效？非也，都是套路啊。
首先，实在便是画一张旁边连贯的360度全景图，大概是这样子的：
上面这张图是背景的示意图，它的设计便是实现360度全景的关键。这是我一张张导出淘宝H5的原始素材后进行拼接，还原出来的背景——被吓到了吧，一张背景居然被切成了20块！
要不然你以为下面这么立体的效果是怎么做的？
而且背景层共有两层：靠后的渐变图片基本固定，靠前的都是带有透明像素的切片，宽度统一做成129像素。由于画面连贯，这20张切片可以通过旋转拼接的办法围成一个环形；当我们在手机上旁边、高下滑动屏幕的时候，便是看着这些切片一直地轮播、变形。
为了让场景变换效果更真实，作者还搭建了多层前景，并通过不同层素材的人物大小比例、物体运动速率的区分，让人眼感想熏染出不同层的远近。下面是部分的分层素材，可以看出分组素材的宽度也是一定的。
不过对付大部分门外汉来说，就算懂得怎么用Photoshop切图，没能耐也没工夫堆砌出这么繁芜的玩意儿，更拿不出几十万请程序员制作，那有没有什么捷径？有，而且非常便捷。
由于淘宝H5虚构出的3D场景实质上便是全景图，以是我们只须要找一个全景场景制作平台，上传一张全景图就行——比如下面是我把淘宝H5的全景图导入720云，天生的页面：
把内容嵌入H5也非常大略，利用iH5的“网页”工具，添加新的网页并设置页面大小，在资源位置填写全景场景的网页地址就行。
比如下面万达的VR视频、天津美院的VR场景，都是在iH5嵌入第三方全景制作平台网页，自己设计加载页、导航菜单等完成的。
2、“假装它是视频”
其余一个淘宝H5也是造物节的，做的是三屏互动，它的创意更倾向于活动策划——限时让好友完成扫码，三部手机就会同时播放三段内容不同、但非常相似的“视频”。
跨屏互动实现并不繁芜，但须要把稳淘宝这个H5比较有心机，它看起来播放的是视频（尤其还用了具有欺骗性的“播放”标识），实在三段所谓的视频都是图片！
上面是这个H5打开时的资源加载情形，你会看到一整片都是JPG（静态图片）！
每张图片掌握在10多K、20多K，让它们一张一张连续播放，再加一段音频广告，就以假乱真了。
虽然知道很多创意玩的便是套路，但这个套路实在太深，但用iH5制作也只须要三步：
（1）把图片序列帧压缩包（zip/gif）用iH5的“幻灯片”功能导入；
（2）在“舞台”放三个“屏幕”，把1号作为主屏幕，放置2号屏幕的二维码，2号屏幕连续放置3号屏幕的二维码；
（3）设置3号屏幕的页面显示时，三个屏幕的幻灯片、音频同时播放。
当然前期准备还是要有的，你得先用视频软件把一段电影剪切成垂直视频，然后用After Effects把视频导出为静态图片序列和独立的音频。
3、“假装它不是视频”
末了压轴的腾讯，刚好做了一件和上面完备相反的事情：人家要把H5伪装成一个视频，他们却是硬要把视频伪装成一个H5！
没错，上面这段在安卓设备里播放也不会涌现掌握条的网页动画，是一段视频。你以为掌握天子的旋转、跳跃，花式自拍背后用了多繁芜的技能，实在你只是看了一段垂直视频。
网页视频在安卓设备上播放，会默认冒出播放器——掌握条都出来了肯定就知道是视频了，但一旦逼迫取消播放器，可能引发各种毛病。那为什么故宫、魔兽两个H5不会？
唉，缘故原由很大略，微信是腾讯自己的，他们在新版浏览器里做了一些配置，对旗下出品的H5有所“优待”，才能确保视频能顺利“乔装”成动画。
以是同样的故宫视频，我们嵌入就可能变成这样（请把稳难以忍受的播放进度条）——
天无绝人之路，还好我们还能“造”。
无论是一开头淘宝的VR、还是后面的真假视频，实在都奥妙利用了我们视觉上的习气，在形式上实现创新。你以为设计师包装一个东西这么大略？现在大家胃口很刁，纯平面已经不足玩了啊...
