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

2017-06-22|HiShop
導(dǎo)讀淘寶造物節(jié)H5 是什么? 淘寶造物節(jié)H5怎么做的 ?很多人說 淘寶造物節(jié) H5能炸了朋友圈! 淘寶造物節(jié) H5效果簡直不要太好。但是也還與人對淘寶造物節(jié)H5知之甚少,我們來看看淘寶造物節(jié)H...

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

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

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

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

  這支H5的全景圖

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

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

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

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

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

  不僅僅是主背景,就連其它畫面元素也都被切割成了類似樣式,這又是為什么吶?

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

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

  H5空間原理的示意圖

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

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

  視頻、div+css、canvas

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

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

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

【本站聲明】 1、本網(wǎng)站發(fā)布的該篇文章,目的在于分享電商知識及傳遞、交流相關(guān)電商信息,以便您學(xué)習(xí)或了解電商知識,請您不要用于其他用途; 2、該篇文章中所涉及的商標(biāo)、標(biāo)識的商品/服務(wù)并非來源于本網(wǎng)站,更非本網(wǎng)站提供,與本網(wǎng)站無關(guān),系他人的商品或服務(wù),本網(wǎng)站對于該類商標(biāo)、標(biāo)識不擁有任何權(quán)利; 3、本網(wǎng)站不對該篇文章中所涉及的商標(biāo)、標(biāo)識的商品/服務(wù)作任何明示或暗示的保證或擔(dān)保; 4、本網(wǎng)站不對文章中所涉及的內(nèi)容真實性、準(zhǔn)確性、可靠性負責(zé),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細的資訊,請您直接與該類商品/服務(wù)的提供者聯(lián)系。
重磅推薦:淘寶學(xué)院目錄

第一部分:極速推

第三部分:微詳情

第四部分:百億補貼

第五部分:淘金幣

第六部分:天天特賣

第七部分:淘寶直播

第八部分:淘寶特價版

第九部分:相關(guān)推薦