【SVG效果揭秘】公眾號推文實現三層滑動教程
探索奈雪的茶如何巧妙運用三層滑動SVG效果，為公眾號文章增添互動性和創新性。本文深入解析了如何通過滑動屏幕“寫詩”，以及如何利用SVG三層上滑效果（ID：31）打造動態視覺體驗。學習如何編輯和同步SVG組件，為你的公眾號內容帶來革命性的互動變革。立即掌握這些技巧，讓你的公眾號在眾多競爭者中脫穎而出。
今天要介紹的優質案例是來自茶飲頭部品牌——奈雪的茶，該篇推文利用三層滑動效果與用戶進行互動，讓用戶通過往下滑動屏幕來為文章“寫詩”，在滑動的過程中讓原本空白的部分，像卷軸上的文字、植物都會逐漸呈現紫色。相較于普通單層滑動、雙層滑動來說，有趣性和創新性直接大大提高，從而讓用戶對品牌推文留下深刻印象。
點擊上方圖片跳轉閱讀??
gif圖展示
這篇文章利用SVG效果為三層上滑，ID為：31。利用三層上滑SVG與主題：寫詩相結合，讓用戶體驗用SVG寫詩的樂趣。該效果有三個部分構成，分別是：最上層部分做成了鏤空圖片，中間部分為紫色圖層，最下面則是背景圖，能實現部分圖片顏色漸顯的重要原因就在于最頂層的鏤空圖片。
選擇將該效果放在推文開頭的位置，能吸引用戶停留更多時間閱讀全文內容。
除了利用三層上滑動做成上述效果外，咱們還可以全篇文章只用一個三層上滑效果來做創意。接下來我要介紹的這篇文章就是通過該效果做成條漫長圖的新年愿望，在滑動的過程中，我們會跟隨動態人物一步步的開啟2023年的展望，在滑動至推文某部分時，動態人物還會穿梭門或者手機等元素，實現穿透的視覺體驗。
gif圖展示
點擊上方橙色文字進行跳轉
從這兩篇優質案例，有這點值得我們學習：
多嘗試與挖掘不同的排版形式。這兩篇文章利用了文章長圖與SVG特點相結合來排版，而不是讓兩者處于分散的狀態，實現了1+1>2的效果。兩篇文章都抓住了三層上滑SVG的特點，在做創意推文時，巧妙設計了圖片的形態，比如在奈雪的茶中，將頂部圖片設計為鏤空狀態，利于中間紫色色塊的呈現。安利好口碑的推文中，將頂層部分設計為呈現穿梭視覺的png格式圖片。
在SVG頁面的【互動效果】的搜索框輸入31或者是“三層上滑”，放入到編輯頁面。
① 這個效果由三個部分組成，第一個是中間固定圖片，就是奈雪的茶中推文中紫色的色塊部分，另外兩部分，分別是頂層滑動圖片和背景滑動圖。
② 在前后雙層滑動圖部分，圖片過長時可以將圖片分割成幾部分上傳。
③ 需要注意的是，中間圖層、頂部圖層以及背景圖層的圖片寬度需要保持一致。
④ 制作完成后，點擊右上角的【同步】【導出】到微信公眾號后臺。
用慣了單層滑動，想要讓推文內容有所變化，那大家可以在此基礎上研究滑動系列的其它效果，進行大膽創新，不要拘泥于自己熟悉的效果，要適當跳出自己的舒適區，多嘗試接受新效果。這期介紹的三層滑動效果很適合大家進行創作，除了做成上述新年愿望主題，像商場做成逛展覽主題，旅游行業用來展示景區都是不錯的選擇，不同行業可以根據行業特色來進行思考。面對現在用戶審美疲勞的情況，適當嘗試和改變推文的風格，能給用戶帶來新鮮感，增強與用戶之間的粘性。
以上就是三兒分享的全部內容啦
如果覺得還不錯
記得點贊+在看
還有什么想看的內容
可以在下方評論區留言哦
立即登錄
