淘宝造物节H5是什么?淘宝造物节H5怎么做的?
很多人说淘宝造物节H5能炸了朋友圈!淘宝造物节H5效果简直不要太好。那么 ,到底淘宝造物节H5是什么?淘宝造物节H5怎么做的呢?
从原理上来说,开发者实际只是用了一个非常常规的展示技术,就是CSS3的空间变换命令,而这个所谓的3D场景是一个不折不扣的伪3D。实际用户们早就见过这种玩法了,只不过以前都是用在真实场景图片上,而这次是首次用在插画上,所以会给人完全不同的新鲜感。而且这支H5并不算是虚拟现实,也不能算作VR H5,真是十分糟糕的技术混淆!
全景图演示图,该H5与之原理相似
这支H5的全景图
我们通过画面的缓慢播放发现,原来背景图是一条条的,被切割了!
尤其是当你进入场景内,把画面放大时,会发现一条条接缝,这就让我们更确信了一个判断,而当通过后台把元素罗列出来时,就一目了然了!
不仅仅是主背景,就连其它画面元素也都被切割成了类似样式,这又是为什么呐?
其实这就是CSS位置变换命令的一个巧妙用法,开发者将所有的图等距离大小切割成了一条条,并把它们围成一个圆形,这样在体验上就创造了一个空间。利用一些算法和简单技术就创造了比较丰富的视觉表现,这真是非常聪明的用法!
H5空间原理的示意图
但问题又来了!一般情况下,想要在H5上实现真实3D展示,需要借助webGL这种编辑方式,而想绕过这个技术壁垒的话,常规有以下三种方式: (视频、div+css、canvas)
视频、div+css、canvas
视频做成3D糊下群众,这个很好理解。但我们通常又会认为canvas相比div+css是更好的解决办法,并且效率更高。可以处理数量更大的素材,并且不耗费请求数量,那么为什么开发者会选择div+css呐?
淘宝造物节H5是什么?淘宝造物节H5怎么做的?小编就和大家介绍这些了。希望对各位有所帮助。
第二、文章作者、来源非“电商卖家网”的为网友提供或网络收集,本站不保证其信息完全准确和正确,不承当信息的责任。
第三、若有版权问题或你认为本站信息若侵犯到你的权益请及时通知,本站第一时间作更改或删除。
- [电商新闻] 跑滴滴一个月能挣多少钱?2017…
- [淘宝卖家专题] 解决千牛提示:【八载】您使用…
- [淘宝天猫] 2017淘宝哪些冷门类目是可以做…
- [电商新闻] 共享单车概念最早起源于哪里?…
- [电商新闻] 2017年有多少个工作日?2017年…
- [淘宝天猫] 淘宝酷动城都是正品么?淘宝酷…
- [电商新闻] 2017年5月应出勤天数多少天呢…
- [淘宝卖家专题] 淘宝新品标发布多久可以加上?…
- [淘宝卖家专题] 怎样去除避免屏蔽淘宝找同款找…
- [淘宝天猫] 保无忧是运费险吗?保无忧和运…
- [淘宝卖家专题] 谷嫂蓝盾和谷嫂绿盾有什么区别…
- [淘宝卖家专题] 谷嫂绿盾下载
- [淘宝卖家专题] 到底购买谷嫂蓝盾好还是购买谷…
- [淘宝天猫] 6月1日起天猫积分不能抵现,以…
- [电商新闻] 数字42696是什么意思?女生说4…
- [电商新闻] 一辆小黄车的成本是多少?年运…
- [淘宝天猫] 你知道农村淘宝合伙人为什么大…
- [淘宝天猫] 拼多多0元团购是真的吗?拼多…
- [电商新闻] 蓝鲸发明者终入狱,蓝鲸鱼死亡…
- [淘宝卖家专题] 谷嫂蓝盾有用吗?
- [淘宝天猫] 购物车营销怎么不见了?在哪里…
- [淘宝天猫] 慎重!淘宝重复开店或重复铺货…
- [淘宝天猫] 拼多多免费拼手机是真的吗?拼…
- [淘宝卖家专题] 谷嫂绿盾 功能介绍-防盗图投诉…
- [淘宝卖家专题] 谷嫂蓝盾功能介绍
- [淘宝天猫] 菜鸟裹裹包裹加密在哪里设置
- [淘宝天猫] 2017淘宝复核认证地址在哪?淘…
- [淘宝天猫] 天猫开新车是什么意思?天猫开…
- [淘宝卖家专题] 蘑菇街产品宝贝被合并同款怎么…
- [淘宝天猫] 2017淘宝极限词可以用哪些词替换
- [淘宝天猫] 2017京东618年中促活动报名时…
- [电商新闻] 蚂蚁森林能量怎么隐藏?蚂蚁森…
- 淘宝找同款淘宝去除同款