H5速成4丨教你用三步做出淘宝双11VR邀请函H5

原创文章 分类: 教程 版权:
4771 77 92 12
2016-10-31
44.1
编辑推荐

不用代码,就需三步就能做出,信不信看了便知~

Image title


7月中旬淘宝720°全景造物节H5惊艳登场戏谑了我们朋友圈一番,如今临近双十一,果不其然出了一个横扫我们眼球的“一镜到底”H5,吃瓜群众表示瓜都掉地上了...


Image title


还没看过这个H5的效果的,可以点这里查看。


这几天细扒了网上很多分析、教程,发现这些文章都停留在案例分析、代码、base64等层面,却没看到真正的“教程”...


——我知道这个作品原设计团队是用代码做的啊!

——那你会代码么?

——不会...


总会出现第一个尝试吃螃蟹的人,昨天我就尝试用iH5无代码高还原度地重制出了双11H5。在致敬原设计团队VML的同时,为大家带来更多可参考的价值。



口说无凭似放屁,那不如先看看我重制出来的效果:


Image title

Image title


实现步骤足够简单粗暴,只需简单三步:


1.准备“一镜到底”的素材


Image title


如果是心细的朋友可能早就发现“一镜到底”本质上是一个多层次素材堆砌的长镜头递进场景。为了方便作品的演示,这里直接扒了《尽情尽兴,尽在双11》的部分素材,拼合成一个递进场景。



步骤A、先在PS拟出整个场景从内至外的层次;



步骤B、把相关的素材按照层次大概排序位置,层次1为最里层依次排开并标记素材位置,方便后序操作。



2.在iH5全景容器上搭建递进场景


Image title


步骤A、将保持不动的背景图片先置于舞台下,新建一个全景容器;



步骤B、按上述拟好的层次顺序将单个素材拖动进全景容器,并调整素材的中心距离(前后)、水平角度(环形左右)、垂直高度(上下)、水平偏移(切面左右)。


Image title


层次间的距离是通过中心点距离控制的,可以完成一层素材堆砌后,先调整观察点位置让镜头往后走,再堆砌下一层素材并调整中心距离。



如果想要把控整体层次的布局,也可以在全景容器的属性栏上调大观察点距离到2000+,调大当前垂直仰角,这样就是一个俯视的垂直视角了:


Image title


3.打开全景容器的滑动焦距控制



最后一步,也是最最最简单的一步,把全景容器属性栏下的滑动焦距控制选择为yes打开重力感应,大功告成!



下面是整个下来的效果图(镜头聚焦效果、前后滑动效果)


Image title

Image title


最后再循例做一个镜头自动拉近聚焦的效果:把全景容器的初始观察点设大点,然后在舞台下插入一个初始化后自动聚焦的事件好了。


Image title


制作过程上对素材的堆砌是比较繁琐的,尤其是分层上的位置处理,建议先拟好场景层次再堆素材,不要一边堆一边分层...


鉴于只是用于演示,且素材、创意并非本人原创,所以我也没继续扒下面层面的素材,只做了第一、二层的效果。万变不离其宗,下面层的实现原理也是一样的,大家自行尝试即可~


上面仿做的H5链接就不放出来了,避免侵权。(想看的话可以私信我,我发你给看看~)


在文章的最后,再次致敬该案例的原创作团队VML,希望有更多佳作涌现!


也希望大家能通过这篇教程,做出一个同样惊艳的H5!

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

2005粉丝/8关注

原创小生
震惊!这个H5居然是在线聊天室!(内附完整教程)网易的爆款H5,手把手教你做!

尼姑拉丝赵四

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN