淘寶造物節h5是什么?淘寶造物節H5怎么做的?
淘寶造物節H5是什么?淘寶造物節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是什么的相關內容,2017淘寶造物節將至,附上<2017淘寶造物節招商(入口、時間以及規則)>商家們都做好充分準備參加了嗎?更多造物節內容請關注Hi商學院