恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
H5速成4丨教你用三步做出淘宝双11VR邀请函H5
0.0°
《关于双11那些不眠夜》-参赛作品
2017-02-15 原创文章 教程 举报 11963 86 106 12

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

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!

更新:2017-02-15

收藏

86人已收藏

尼姑拉丝赵四

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

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

  • 震惊!这个H5居然是在线聊天室!(内附完整教程)
  • 网易的爆款H5,手把手教你做!
  • 3个小时150万UV!网易的童年 H5刷屏了!
  • 视觉逼格指南:几何抽象风格神器

    猜你喜欢

      2017-02-15 原创文章 教程 举报 11963 86 106 12

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

      0.0°

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

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月31日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      106
      86
      12

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录