自從淘寶造物節(jié)H5運(yùn)用720度全景交互功能刷爆全網(wǎng)后，很多設(shè)計(jì)師把它應(yīng)用在各種場(chǎng)合，簡(jiǎn)直有玩壞的節(jié)奏——
來(lái)源：iH5（ih5_cn）
數(shù)英網(wǎng)二次編輯整理
1、神秘的唐卡
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
八張?zhí)瓶▏扇皥D，頂部和底部是兩張圓形圖案，一看就是經(jīng)過(guò)嚴(yán)密計(jì)算過(guò)，圓形與中心的距離剛好與中部的筒形無(wú)縫對(duì)接（精神可嘉）。
然而當(dāng)你點(diǎn)擊“點(diǎn)我獲得加持”后，會(huì)進(jìn)入××聽(tīng)佛歌、××放生、××學(xué)經(jīng)文等微信圖文頁(yè)面——
它竟然是用來(lái)給公眾號(hào)導(dǎo)流的！
2、揭秘地鐵2號(hào)線
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
這張鄭州地鐵2號(hào)線地圖有點(diǎn)燃。
720度全景展示路線的同時(shí)，還選取站點(diǎn)的標(biāo)志性建筑進(jìn)行介紹，點(diǎn)著點(diǎn)著你會(huì)發(fā)現(xiàn)那些用閃閃的GIF標(biāo)記的地點(diǎn)也有內(nèi)涵——
它是一則地產(chǎn)廣告！
3、展區(qū)內(nèi)部聚焦
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
全媒體互動(dòng)虛擬演播室、融合媒體制播區(qū)、全新非編演播室產(chǎn)品講座區(qū)……
各種展區(qū)通過(guò)全景融為一體，點(diǎn)擊展區(qū)名稱就會(huì)聚焦放大、然后進(jìn)入展位內(nèi)部演示——
這是直接把展廳從線下搬到線上啊！
4、720°無(wú)死角的買賣
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
你有沒(méi)有想到還有這么一招？把全景用來(lái)展示商品，將所有百貨活動(dòng)頁(yè)面（100元專區(qū)、200元專區(qū)等等）甚至活動(dòng)商品合為一體。
使用自動(dòng)播放功能，還能讓商品主動(dòng)動(dòng)起來(lái)——
蘇寧818全民發(fā)燒節(jié)，那么猛的廣告渠道不是白鋪的！
5、淘寶《ZAO》完全模擬
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
這個(gè)就絕了，直接把淘寶造物節(jié)的初始動(dòng)畫、全景插畫風(fēng)格和版式、內(nèi)部導(dǎo)航菜單等一股腦兒搬過(guò)來(lái)——
嗯，還是有改進(jìn)的，全景身后的背景是動(dòng)態(tài)的漸變色天空，但原版是靜止的。
上面5個(gè)H5實(shí)際上代表著全景組件應(yīng)用的5種功能：
（1）封閉環(huán)境的構(gòu)造：全景容器下加圖片，把圖片類型設(shè)為“頂”、“底”；
（2）按鈕的動(dòng)效設(shè)計(jì)：全景容器下加GIF圖片作為按鈕，為GIF添加“點(diǎn)擊”事件；
（3）全景的聚焦設(shè)計(jì)：對(duì)全景背景組執(zhí)行“聚焦至某位置”的目標(biāo)動(dòng)作，設(shè)置觀察點(diǎn)位置與時(shí)長(zhǎng)；
（4）全自動(dòng)瀏覽：在全景容器的“自動(dòng)播放速度”添加參數(shù)；
（5）初始動(dòng)畫導(dǎo)入：用時(shí)間軸控制不同片云彩的位移、旋轉(zhuǎn)等參數(shù)的變化。
功能看起來(lái)簡(jiǎn)單，它可以做很多東西：3D商品展示、全景游戲、聚焦放縮的演示、重力感應(yīng)展示……上面的案例基本包含了它能用的功能，但應(yīng)用上還沒(méi)有挖掘完全，所以這功能還是玩不壞的！
附：全景應(yīng)用的精品開(kāi)發(fā)案例
淘寶造物節(jié)邀請(qǐng)函
案例詳情點(diǎn)擊：http://www.sh-jinniu.com/projects/18008.html
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
尋找 MOON MILK
掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（3條）