淘寶造物節(jié)h5是什么?淘寶造物節(jié)H5怎么做的?

　　淘寶造物節(jié)H5是什么?淘寶造物節(jié)H5怎么做的?很多人說(shuō)淘寶造物節(jié)H5能炸了朋友圈!淘寶造物節(jié)H5效果簡(jiǎn)直不要太好。但是也還與人對(duì)淘寶造物節(jié)H5知之甚少，我們來(lái)看看淘寶造物節(jié)H5是什么?淘寶造物節(jié)H5怎么做的?

　　從原理上來(lái)說(shuō)，開(kāi)發(fā)者實(shí)際只是用了一個(gè)非常常規(guī)的展示技術(shù)，就是CSS3的空間變換命令，而這個(gè)所謂的3D場(chǎng)景是一個(gè)不折不扣的偽3D。實(shí)際用戶(hù)們?cè)缇鸵?jiàn)過(guò)這種玩法了，只不過(guò)以前都是用在真實(shí)場(chǎng)景圖片上，而這次是首次用在插畫(huà)上，所以會(huì)給人完全不同的新鮮感。而且這支H5并不算是虛擬現(xiàn)實(shí)，也不能算作VR H5，真是十分糟糕的技術(shù)混淆!

　　全景圖演示圖，該H5與之原理相似

　　這支H5的全景圖

　　我們通過(guò)畫(huà)面的緩慢播放發(fā)現(xiàn)，原來(lái)背景圖是一條條的，被切割了!

　　尤其是當(dāng)你進(jìn)入場(chǎng)景內(nèi)，把畫(huà)面放大時(shí)，會(huì)發(fā)現(xiàn)一條條接縫，這就讓我們更確信了一個(gè)判斷，而當(dāng)通過(guò)后臺(tái)把元素羅列出來(lái)時(shí)，就一目了然了!

　　不僅僅是主背景，就連其它畫(huà)面元素也都被切割成了類(lèi)似樣式，這又是為什么吶?

　　其實(shí)這就是CSS位置變換命令的一個(gè)巧妙用法，開(kāi)發(fā)者將所有的圖等距離大小切割成了一條條，并把它們圍成一個(gè)圓形，這樣在體驗(yàn)上就創(chuàng)造了一個(gè)空間。利用一些算法和簡(jiǎn)單技術(shù)就創(chuàng)造了比較豐富的視覺(jué)表現(xiàn)，這真是非常聰明的用法!

　　H5空間原理的示意圖

　　但問(wèn)題又來(lái)了!一般情況下，想要在H5上實(shí)現(xiàn)真實(shí)3D展示，需要借助webGL這種編輯方式，而想繞過(guò)這個(gè)技術(shù)壁壘的話(huà)，常規(guī)有以下三種方式： (視頻、div+css、canvas)

　　視頻、div+css、canvas

　　視頻做成3D糊下群眾，這個(gè)很好理解。但我們通常又會(huì)認(rèn)為canvas相比div+css是更好的解決辦法，并且效率更高?？梢蕴幚頂?shù)量更大的素材，并且不耗費(fèi)請(qǐng)求數(shù)量，那么為什么開(kāi)發(fā)者會(huì)選擇div+css吶?

        以上就是淘寶造物節(jié)H5是什么的相關(guān)內(nèi)容，2017淘寶造物節(jié)將至，附上<2017淘寶造物節(jié)招商（入口、時(shí)間以及規(guī)則）>商家們都做好充分準(zhǔn)備參加了嗎?更多造物節(jié)內(nèi)容請(qǐng)關(guān)注Hi商學(xué)院