欧美涩色-欧美社区-欧美熟夫-欧美熟色妇-九色在线-九色在线播放

【SVG效果揭秘】公眾號(hào)推文實(shí)現(xiàn)三層滑動(dòng)教程

探索奈雪的茶如何巧妙運(yùn)用三層滑動(dòng)SVG效果,為公眾號(hào)文章增添互動(dòng)性和創(chuàng)新性。本文深入解析了如何通過滑動(dòng)屏幕“寫詩(shī)”,以及如何利用SVG三層上滑效果(ID:31)打造動(dòng)態(tài)視覺體驗(yàn)。學(xué)習(xí)如何編輯和同步SVG組件,為你的公眾號(hào)內(nèi)容帶來革命性的互動(dòng)變革。立即掌握這些技巧,讓你的公眾號(hào)在眾多競(jìng)爭(zhēng)者中脫穎而出。




寫在前面


今天要介紹的優(yōu)質(zhì)案例是來自茶飲頭部品牌——奈雪的茶,該篇推文利用三層滑動(dòng)效果與用戶進(jìn)行互動(dòng),讓用戶通過往下滑動(dòng)屏幕來為文章“寫詩(shī)”,在滑動(dòng)的過程中讓原本空白的部分,像卷軸上的文字、植物都會(huì)逐漸呈現(xiàn)紫色。相較于普通單層滑動(dòng)、雙層滑動(dòng)來說,有趣性和創(chuàng)新性直接大大提高,從而讓用戶對(duì)品牌推文留下深刻印象。




點(diǎn)擊上方圖片跳轉(zhuǎn)閱讀??






效果講解




gif圖展示


這篇文章利用SVG效果為三層上滑,ID為:31。利用三層上滑SVG與主題:寫詩(shī)相結(jié)合,讓用戶體驗(yàn)用SVG寫詩(shī)的樂趣。該效果有三個(gè)部分構(gòu)成,分別是:最上層部分做成了鏤空?qǐng)D片,中間部分為紫色圖層,最下面則是背景圖,能實(shí)現(xiàn)部分圖片顏色漸顯的重要原因就在于最頂層的鏤空?qǐng)D片。


選擇將該效果放在推文開頭的位置,能吸引用戶停留更多時(shí)間閱讀全文內(nèi)容。


除了利用三層上滑動(dòng)做成上述效果外,咱們還可以全篇文章只用一個(gè)三層上滑效果來做創(chuàng)意。接下來我要介紹的這篇文章就是通過該效果做成條漫長(zhǎng)圖的新年愿望,在滑動(dòng)的過程中,我們會(huì)跟隨動(dòng)態(tài)人物一步步的開啟2023年的展望,在滑動(dòng)至推文某部分時(shí),動(dòng)態(tài)人物還會(huì)穿梭門或者手機(jī)等元素,實(shí)現(xiàn)穿透的視覺體驗(yàn)。



gif圖展示


《2023新年愿望清單》

點(diǎn)擊上方橙色文字進(jìn)行跳轉(zhuǎn)



從這兩篇優(yōu)質(zhì)案例,有這點(diǎn)值得我們學(xué)習(xí):


多嘗試與挖掘不同的排版形式。這兩篇文章利用了文章長(zhǎng)圖與SVG特點(diǎn)相結(jié)合來排版,而不是讓兩者處于分散的狀態(tài),實(shí)現(xiàn)了1+1>2的效果。兩篇文章都抓住了三層上滑SVG的特點(diǎn),在做創(chuàng)意推文時(shí),巧妙設(shè)計(jì)了圖片的形態(tài),比如在奈雪的茶中,將頂部圖片設(shè)計(jì)為鏤空狀態(tài),利于中間紫色色塊的呈現(xiàn)。安利好口碑的推文中,將頂層部分設(shè)計(jì)為呈現(xiàn)穿梭視覺的png格式圖片。






使用講解



01
打開SVG組件


在SVG頁(yè)面的【互動(dòng)效果】的搜索框輸入31或者是“三層上滑”,放入到編輯頁(yè)面。



02
編輯SVG組件


① 這個(gè)效果由三個(gè)部分組成,第一個(gè)是中間固定圖片,就是奈雪的茶中推文中紫色的色塊部分,另外兩部分,分別是頂層滑動(dòng)圖片和背景滑動(dòng)圖。



② 在前后雙層滑動(dòng)圖部分,圖片過長(zhǎng)時(shí)可以將圖片分割成幾部分上傳。



③ 需要注意的是,中間圖層、頂部圖層以及背景圖層的圖片寬度需要保持一致。


④ 制作完成后,點(diǎn)擊右上角的【同步】【導(dǎo)出】到微信公眾號(hào)后臺(tái)。







三兒說


用慣了單層滑動(dòng),想要讓推文內(nèi)容有所變化,那大家可以在此基礎(chǔ)上研究滑動(dòng)系列的其它效果,進(jìn)行大膽創(chuàng)新,不要拘泥于自己熟悉的效果,要適當(dāng)跳出自己的舒適區(qū),多嘗試接受新效果。這期介紹的三層滑動(dòng)效果很適合大家進(jìn)行創(chuàng)作,除了做成上述新年愿望主題,像商場(chǎng)做成逛展覽主題,旅游行業(yè)用來展示景區(qū)都是不錯(cuò)的選擇,不同行業(yè)可以根據(jù)行業(yè)特色來進(jìn)行思考。面對(duì)現(xiàn)在用戶審美疲勞的情況,適當(dāng)嘗試和改變推文的風(fēng)格,能給用戶帶來新鮮感,增強(qiáng)與用戶之間的粘性。




以上就是三兒分享的全部?jī)?nèi)容啦

如果覺得還不錯(cuò)

記得點(diǎn)贊+在看

還有什么想看的內(nèi)容

可以在下方評(píng)論區(qū)留言哦





END




文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權(quán)請(qǐng)聯(lián)系我們刪除
文章評(píng)價(jià)
登錄后可以評(píng)論
立即登錄
比格設(shè)計(jì)
熱門工具
135編輯器
領(lǐng)先的在線圖文編輯平臺(tái)原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計(jì)
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機(jī)海報(bào)應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營(yíng)銷、私域流量運(yùn)營(yíng)——站式營(yíng)銷管理平臺(tái)
推薦文章
用戶運(yùn)營(yíng)平臺(tái)產(chǎn)品設(shè)計(jì)指南
淺談?dòng)脩暨\(yùn)營(yíng)中的用戶分層
內(nèi)容運(yùn)營(yíng):戴上寫作的六頂思考帽
5000字方法論:4個(gè)細(xì)節(jié),決定私域能不能賺錢
一個(gè)案例說明白用戶分析怎么用
22條視頻,漲粉12.6萬(wàn),一個(gè)女孩子在抖音靠洗車也能月入過萬(wàn)!
高價(jià)值社群的5大核心關(guān)鍵
抖音賬號(hào)內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問題;抖音6月1日起將對(duì)本地生活商家收取服務(wù)費(fèi)
熱門素材樣式
運(yùn)營(yíng)導(dǎo)航
運(yùn)營(yíng)工具
分享到
主站蜘蛛池模板: 男女午夜爽爽 | 亚洲va欧美va国产综合久久 | 日本免费一区二区三区a区 日本免费一区二区三区看片 | 国产你懂的视频 | 亚洲精品无码专区在线播放 | 怡春院日本一区二区久久 | 国产亚洲一区二区精品 | 九九九热在线精品免费全部 | 免费在线视频成人 | 成 人 色综合 | 亚洲视频 欧美视频 | 午夜精品视频 | 男女视频在线观看网站 | 茄子视频黄 | 日本一二三区在线视频 | 热热色原网址 | 国产精品久久天天影视 | 中文字幕一区二区三区免费看 | 深夜福利网站 | 成人在线免费观看 | 一个人看的www在线 一个人看的www在线播放 | 精品午夜国产在线观看不卡 | 成 人 免费观看网站 | 特级全黄一级毛片视频 | 成人午夜私人影院入口 | 亚洲精品成人 | 中文一级国产特级毛片视频 | 国产精品自在线天天看片 | 国内精品久久久久久久久野战 | 中文伦理 | 99久久亚洲综合精品网站 | 国产日产欧美一区二区三区 | 婷婷国产天堂久久综合五月 | 国产毛片一级国语版 | 成年女人毛片免费观看不卡 | 欧美日韩在线观看精品 | 老司机av磁力 | 精品手机在线视频 | 国产成人午夜精品免费视频 | 国产成人手机视频 | 国产凹凸在线观看一区二区 |