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