2018年，在我司推送的《別讓老板看到！》一文中，首次將圖文高度拉伸展開效果引入完成技術(shù)實踐后，先后并成為各大品牌數(shù)次定制的交互技術(shù)之一。
今天同樣給大家?guī)硪粍t具有高度拉伸特性的交互圖文，以我們交付于英菲尼迪的《英菲尼迪故事無限公司，今日正式開業(yè)》推文為分享案例。
傳送鏈接：
文章篇幅和內(nèi)容上都較為精簡，但在SVG技術(shù)的支持下使內(nèi)容呈現(xiàn)質(zhì)的飛躍。接下來給大家簡單分析，在這篇推送中使用到的技術(shù)以及達到的內(nèi)容優(yōu)化效果。
可以看出開篇無需明顯引導(dǎo)，通過點擊封面淡出消失，將隱藏的圖文內(nèi)容高度展開，這已經(jīng)成為用戶熟知的交互方式，并能夠快速執(zhí)行產(chǎn)生交互效果。在原文第二部分，借助「css橫版視頻精準(zhǔn)定位」技術(shù)，使視頻不再以常見的平面直鋪的方式出現(xiàn)，將呈現(xiàn)方式與內(nèi)容有機結(jié)合。其次，使用「穿透觸發(fā)彈出大圖」引導(dǎo)用戶點擊查閱彈出詳細信息，這個過程又一次產(chǎn)生互動，呈現(xiàn)了更加豐富的視覺動態(tài)效果。
小小總結(jié)，推送使用技術(shù)：圖文高度展開+css橫版視頻精準(zhǔn)定位+穿透觸發(fā)彈出大窗
當(dāng)然，交互創(chuàng)意不僅局限于此，經(jīng)過視覺優(yōu)化、技術(shù)移植，使圖文內(nèi)容擁有更優(yōu)質(zhì)的呈現(xiàn)效果，我司也在不斷迭代更新技術(shù)創(chuàng)意和代碼邏輯，開發(fā)層出不窮的SVG交互圖文創(chuàng)意玩法。
