公眾號(hào)SVG互動(dòng)創(chuàng)意排版效果教學(xué)

前段時(shí)間人民網(wǎng)公眾號(hào)推了一個(gè)特別有意思公眾號(hào)SVG互動(dòng)創(chuàng)意的文章,文章一開(kāi)始展現(xiàn)的是一副卷軸,用文字引導(dǎo)讀者,點(diǎn)擊一下,卷軸再徐徐打開(kāi)。極具美感和創(chuàng)意,一時(shí)間刷遍了大家的朋友圈。大家一邊感嘆內(nèi)容精美,一邊也為這種創(chuàng)意文章的形式感到驚喜。




SVG編輯器入口:http://d1167.cn/svgeditor/


一、SVG互動(dòng)效果展示


那么這種公眾號(hào)互動(dòng)創(chuàng)意排版是如何制作的呢?其實(shí)這是利用SVG代碼制作而成的,在微信公眾號(hào)后臺(tái)是無(wú)法直接實(shí)現(xiàn)這樣的效果,必須要專業(yè)的編程人員來(lái)敲代碼。不過(guò),最近小編發(fā)現(xiàn)了一個(gè)工具,不用學(xué)習(xí)代碼,也能夠讓你輕松實(shí)現(xiàn)這樣的效果,下面一起跟著小編來(lái)學(xué)習(xí)SVG互動(dòng)排版效果教學(xué)吧。


效果示范↑

點(diǎn)擊后,展開(kāi)畫(huà)面


在畫(huà)面上,點(diǎn)擊箭頭后,文章會(huì)自動(dòng)打開(kāi)。這種效果我們可以利用135編輯器輕松實(shí)現(xiàn),接下來(lái)就是詳細(xì)的操作步驟,大家一定要仔細(xì)看好了!


二、公眾號(hào)SVG互動(dòng)準(zhǔn)備工作


1、首先登錄135編輯器,將菜單欄切換成【專業(yè)版】



2、在基礎(chǔ)布局,找到SVG布局,點(diǎn)擊樣式,放置在135編輯器編輯區(qū)內(nèi)。



3、在編輯區(qū)內(nèi)點(diǎn)擊樣式,在彈出的菜單欄中點(diǎn)擊【SVG布局動(dòng)畫(huà)】



注意:在制作這個(gè)效果前,你先準(zhǔn)備好點(diǎn)擊后展開(kāi)的文章內(nèi)容。并保存在【我的文章】里。



三、SVG制作點(diǎn)擊展開(kāi)效果


制作這個(gè)效果前,我們先對(duì)SVG動(dòng)畫(huà)設(shè)置版面有個(gè)初步了解。大家可以點(diǎn)擊下面圖片,詳細(xì)查看。



要制作這個(gè)效果,第一頁(yè)我們把類型設(shè)置為圖片,上傳點(diǎn)擊前的圖片。




由于這張圖比例和SVG默認(rèn)的比例是不同的,導(dǎo)致兩邊有多余的白色,我們可以條則會(huì)那個(gè)一下寬高比,使之看起來(lái)差不多即可。圖片區(qū)域,選擇覆蓋。



圖片區(qū)域:

包含是指圖片如果無(wú)法剛好鋪滿畫(huà)布,則留出一定空白。

覆蓋是指圖片如果無(wú)法剛好鋪滿畫(huà)布,則會(huì)自動(dòng)裁去超出的部分。




然后設(shè)置動(dòng)畫(huà)效果為展開(kāi)。



點(diǎn)擊預(yù)覽/編輯圖文-編輯圖文




在這里會(huì)調(diào)用出一個(gè)系統(tǒng)編輯器,我們要將事先準(zhǔn)備好的文章打開(kāi)。




完成編輯后,你可以調(diào)整動(dòng)畫(huà)時(shí)長(zhǎng),也就是展開(kāi)這篇文章所需要的時(shí)間。數(shù)值越大,動(dòng)作越慢。



設(shè)置完畢后,點(diǎn)擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無(wú)誤后,點(diǎn)擊完成即可。如果需要發(fā)送到手機(jī)上預(yù)覽,可以用編輯器的【手機(jī)預(yù)覽】功能。




- END -


點(diǎn)擊135編輯器獲取更多資訊


文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開(kāi)渠道,如有侵權(quán)請(qǐng)聯(lián)系我們刪除
文章評(píng)價(jià)
登錄后可以評(píng)論
立即登錄
小伍資深編輯
共638篇文章
最近文章
更多
  • 雙十二電商活動(dòng)宣傳排版素材(電商商品促銷推廣模版樣式)
  • 乞巧節(jié)微信公眾號(hào)推文排版素材(愛(ài)情浪漫活動(dòng)推廣文案)
  • 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
  • 八一建軍節(jié)紀(jì)念日推文排版樣式(光輝歷程文案宣傳模版)
比格設(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):戴上寫(xiě)作的六頂思考帽
5000字方法論:4個(gè)細(xì)節(jié),決定私域能不能賺錢
一個(gè)案例說(shuō)明白用戶分析怎么用
22條視頻,漲粉12.6萬(wàn),一個(gè)女孩子在抖音靠洗車也能月入過(guò)萬(wàn)!
高價(jià)值社群的5大核心關(guān)鍵
抖音賬號(hào)內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問(wèn)題;抖音6月1日起將對(duì)本地生活商家收取服務(wù)費(fèi)
熱門素材樣式
運(yùn)營(yíng)導(dǎo)航
運(yùn)營(yíng)工具
分享到