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