去年“淘宝造物节”的全景H5，刷屏了朋友圈好几天。 对于这种新奇、有趣而又突破传统的H5平面展示方式，不少用户浏览后都大呼过瘾! 然而，这种既能上下翻滚，又能左右滑动的720度无死角全景H5是怎么实现的? 花上万元高价给外包团队制作?由技术部门专业开发?No!No!No! 只要用上一个黑科技工具，任何小白都能轻轻松松打造出一个720°的全景H5，这不是跟大家开玩笑，请看下面效果图： 不管是技术团队、设计师，还是普通用户，看了这个作品都应该会产生一种再历“淘宝造物节”H5的感觉，而产生这股神秘之力的原因，大概就是源自于它的720°全景视角吧。不过可以告诉大家，这个720°全景H5的制作过程并不复杂，下面就来还原它的制作步骤。 一、全景素材的准备 720°全景H5实际是由一张外圈背景图和内圈背景图，以及背景图上的图片部件共同组成的，所以在制作之前，大家可以先准备好以下的素材： 1.全景H5的外圈背景图片(2580×1306) 2.全景H5的内圈背景PNG图片(2360×1206) 3.组合在全景背景图上的物件PNG图 如果大家想更快速的制作出720°全景H5，可以直接使用微传单的720°全景H5的模板进行制作，在模板的基础上对文案内容、弹窗页面内容进行编辑修改。 二、用凡科微传单制作720°全景H5 在凡科微传单中创建720°全景H5模板，将第一步准备好的图片素材，上传并替换到模板上，并选择好底色。 然后在H5的组合物件或者文案上添加“弹窗”功能，并设置好弹窗页面内容，然后返回至全景页面上，通过“点击”——“跳转页面”——“打开弹窗”——“选择弹窗”设置好部件所打开的弹窗页面。 要注意的是，在展开的全景H5页面里设置物件素材的位置时，两个重叠的素材在平面展示中看上去可能很完整，但在实际的全景展示中，不同的摆放位置会出现斜切的现象。 所以在凡科微传单制作720°全景H5的时候，应该保持物件素材之间不重叠摆放，如果一定要重叠效果的，可将物件素材水平居中对齐，这样就可以避免H5上的物件出现相切的情况。 三、分享720°全景H5至线上 制作好全景H5后，先将H5保存并对H5进行发布设置，在发布设置的界面上预览制作好的720°全景H5整体效果，然后填写好H5的标题名称、全景H5的描述内容和分享H5的封面图片。 最后，扫描平台生成的二维码打开720°全景H5，再将其分享到朋友圈上，一支刷屏朋友圈的720°全景H5就打造完成了。 看完上面的操作，大家也应该懂得怎么制作一个720°全景H5了吧。实际上整个H5制作下来所花费的时间并不会很多，只要前期将所有的素材都准备好，那么打造一个全景H5，压根就不会费事费神。 |
