提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
不用代码,就需三步就能做出,信不信看了便知~
7月中旬淘宝720°全景造物节H5惊艳登场戏谑了我们朋友圈一番,如今临近双十一,果不其然出了一个横扫我们眼球的“一镜到底”H5,吃瓜群众表示瓜都掉地上了...
还没看过这个H5的效果的,可以点这里查看。
这几天细扒了网上很多分析、教程,发现这些文章都停留在案例分析、代码、base64等层面,却没看到真正的“教程”...
——我知道这个作品原设计团队是用代码做的啊!
——那你会代码么?
——不会...
总会出现第一个尝试吃螃蟹的人,昨天我就尝试用iH5无代码高还原度地重制出了双11H5。在致敬原设计团队VML的同时,为大家带来更多可参考的价值。
口说无凭似放屁,那不如先看看我重制出来的效果:
实现步骤足够简单粗暴,只需简单三步:
1.准备“一镜到底”的素材
如果是心细的朋友可能早就发现“一镜到底”本质上是一个多层次素材堆砌的长镜头递进场景。为了方便作品的演示,这里直接扒了《尽情尽兴,尽在双11》的部分素材,拼合成一个递进场景。
步骤A、先在PS拟出整个场景从内至外的层次;
步骤B、把相关的素材按照层次大概排序位置,层次1为最里层依次排开并标记素材位置,方便后序操作。
2.在iH5全景容器上搭建递进场景
步骤A、将保持不动的背景图片先置于舞台下,新建一个全景容器;
步骤B、按上述拟好的层次顺序将单个素材拖动进全景容器,并调整素材的中心距离(前后)、水平角度(环形左右)、垂直高度(上下)、水平偏移(切面左右)。
层次间的距离是通过中心点距离控制的,可以完成一层素材堆砌后,先调整观察点位置让镜头往后走,再堆砌下一层素材并调整中心距离。
如果想要把控整体层次的布局,也可以在全景容器的属性栏上调大观察点距离到2000+,调大当前垂直仰角,这样就是一个俯视的垂直视角了:
3.打开全景容器的滑动焦距控制
最后一步,也是最最最简单的一步,把全景容器属性栏下的滑动焦距控制选择为yes,打开重力感应,大功告成!
下面是整个下来的效果图(镜头聚焦效果、前后滑动效果)
最后再循例做一个镜头自动拉近聚焦的效果:把全景容器的初始观察点设大点,然后在舞台下插入一个初始化后自动聚焦的事件好了。
制作过程上对素材的堆砌是比较繁琐的,尤其是分层上的位置处理,建议先拟好场景层次再堆素材,不要一边堆一边分层...
鉴于只是用于演示,且素材、创意并非本人原创,所以我也没继续扒下面层面的素材,只做了第一、二层的效果。万变不离其宗,下面层的实现原理也是一样的,大家自行尝试即可~
上面仿做的H5链接就不放出来了,避免侵权。(想看的话可以私信我,我发你给看看~)
在文章的最后,再次致敬该案例的原创作团队VML,希望有更多佳作涌现!
也希望大家能通过这篇教程,做出一个同样惊艳的H5!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册