蒂芙尼公眾號玩轉 SVG 交互黑科技：從視差滑動的沉浸意境，到點擊切換的細膩敘事，還有卡片彈窗、抽簽互動等多元效果，讓奢侈品表達兼具精致質感與趣味體驗，重塑高端品牌數字化內容新形態。

視差滑動

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

視差滑動+點擊切換 

本作由 JZ Creative 承載開發，是一篇非常優秀的時間軸故事圖文設計。數字點擊后向兩側緩緩展開，由黑白過渡到彩色的蒂芙尼獎杯制作故事映入眼簾，并可連續點擊往返切換刷新，動效相當細膩。

視差卡片

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

底層滑動+熱區型彈出式海報

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

多熱區無限切換并浮現

由 JZ Creative 承擔承載開發的此內容，設置了細膩交互體驗 —— 當我們點擊蒂芙尼限定禮盒，就能看到精心設計的動效：先是禮盒打開的圖片切換呈現，緊接著盒內珠寶便會緩緩浮現，盡顯精致質感。

多熱區無限浮現關閉

蒂芙尼珠寶背景圖設有多個觸發位置，點擊即可彈出珠寶的海報圖，讓用戶更直觀了解該系列珠寶的獨特特色，搭配 “愛，始于 1837” 的經典品牌理念，既增添互動趣味，又讓你深入感受珠寶魅力。該效果可以用 E2 編輯器「多熱區無限浮現-可關閉」實現。

無限選擇器

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

任意點擊彈出卡片

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

吸附視差滑動

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

 擠壓伸長