蒂芙尼公眾號(hào)玩轉(zhuǎn) SVG 交互黑科技：從視差滑動(dòng)的沉浸意境，到點(diǎn)擊切換的細(xì)膩敘事，還有卡片彈窗、抽簽互動(dòng)等多元效果，讓奢侈品表達(dá)兼具精致質(zhì)感與趣味體驗(yàn)，重塑高端品牌數(shù)字化內(nèi)容新形態(tài)。

視差滑動(dòng)

由 JZ Creative 定制開發(fā)，第一篇巧妙地運(yùn)用視差滑動(dòng)技術(shù)并配合從首幀加載播放的 GIF 動(dòng)畫，營(yíng)造出一種撥云見日的視覺效果；第二篇借視差滑動(dòng)技術(shù)的巧妙加持，營(yíng)造豐富層次肌理，使自然靈感的意境與奢侈品的精巧表達(dá)相融。

視差滑動(dòng)+點(diǎn)擊切換 

本作由 JZ Creative 承載開發(fā)，是一篇非常優(yōu)秀的時(shí)間軸故事圖文設(shè)計(jì)。數(shù)字點(diǎn)擊后向兩側(cè)緩緩展開，由黑白過渡到彩色的蒂芙尼獎(jiǎng)杯制作故事映入眼簾，并可連續(xù)點(diǎn)擊往返切換刷新，動(dòng)效相當(dāng)細(xì)膩。

視差卡片

 借 E2.COOL 黑科技 SVG 編輯器的「視差卡片」組件，第一篇以跨屏巨大飾品盒帶來強(qiáng)烈沉浸感，引導(dǎo)視覺聚焦頂端產(chǎn)品，穿插的黑白照片如時(shí)間畫廊，賦予時(shí)空穿梭立體感，將產(chǎn)品故事娓娓道來；第二篇是 Tiffany 七夕節(jié)特別企劃，以橫向視差滑動(dòng)呈現(xiàn)代言人愛意觀點(diǎn)，營(yíng)造細(xì)膩層次感，契合七夕浪漫氛圍與奢侈品精致表達(dá)。

底層滑動(dòng)+熱區(qū)型彈出式海報(bào)

從左滑動(dòng)探索蒂芙尼該系列珠寶靈感：底層背景固定，中間層隨滑動(dòng)切換內(nèi)容并帶吸附效果，頂層蝴蝶始終靜止。滑動(dòng)中可窺見靈鳥、1837 年品牌起點(diǎn)、逾 7500 克拉紫鋰輝石等靈感元素，點(diǎn)擊頁面中明信片，即可彈出相關(guān)照片，動(dòng)效流暢且凸顯細(xì)節(jié)。該效果可以用 E2 編輯器「底層滑動(dòng)」、「等分容器吸附滑動(dòng)」和「熱區(qū)型彈出式海報(bào)」實(shí)現(xiàn)。

多熱區(qū)無限切換并浮現(xiàn)

由 JZ Creative 承擔(dān)承載開發(fā)的此內(nèi)容，設(shè)置了細(xì)膩交互體驗(yàn) —— 當(dāng)我們點(diǎn)擊蒂芙尼限定禮盒，就能看到精心設(shè)計(jì)的動(dòng)效：先是禮盒打開的圖片切換呈現(xiàn)，緊接著盒內(nèi)珠寶便會(huì)緩緩浮現(xiàn)，盡顯精致質(zhì)感。

多熱區(qū)無限浮現(xiàn)關(guān)閉

蒂芙尼珠寶背景圖設(shè)有多個(gè)觸發(fā)位置，點(diǎn)擊即可彈出珠寶的海報(bào)圖，讓用戶更直觀了解該系列珠寶的獨(dú)特特色，搭配 “愛，始于 1837” 的經(jīng)典品牌理念，既增添互動(dòng)趣味，又讓你深入感受珠寶魅力。該效果可以用 E2 編輯器「多熱區(qū)無限浮現(xiàn)-可關(guān)閉」實(shí)現(xiàn)。

無限選擇器

點(diǎn)擊「自然之靈」、「立體之形」和「鮮活之彩」等關(guān)鍵詞，流暢切換動(dòng)效，即可快速瀏覽不同系列珠寶，輕松解鎖蒂芙尼珠寶各系列風(fēng)采。該效果可以用 E2 編輯器「無限選擇器」實(shí)現(xiàn)。

任意點(diǎn)擊彈出卡片

美好的節(jié)日將至，從 9 份禮盒中隨機(jī)挑選出一款看看！Tiffany 本作的開頭由 JZ Creative 操刀布局了一組可任意點(diǎn)擊彈出卡片，并支持關(guān)閉或進(jìn)一步跳轉(zhuǎn)商鋪的 SVG 黑科技排版，可以以說是同屏交互陳列商品的典范之作。

吸附視差滑動(dòng)

左右滑動(dòng)時(shí)，視差切換效果靈動(dòng)，畫面元素隨滑動(dòng)產(chǎn)生層次位移，營(yíng)造出細(xì)膩空間感。同時(shí)，各滑塊內(nèi)容始終穩(wěn)穩(wěn)居于畫面正中，搭配品牌求婚相關(guān)內(nèi)容，讓每一次滑動(dòng)都成為沉浸式浪漫體驗(yàn)，凸顯精致氛圍。該效果可以用 E2 編輯器「吸附視差滑動(dòng)」實(shí)現(xiàn)。

 擠壓伸長(zhǎng)