公眾號SVG互動創(chuàng)意排版效果教學

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




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


一、SVG互動效果展示


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


效果示范↑

點擊后,展開畫面


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


二、公眾號SVG互動準備工作


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



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



3、在編輯區(qū)內點擊樣式,在彈出的菜單欄中點擊【SVG布局動畫】



注意:在制作這個效果前,你先準備好點擊后展開的文章內容。并保存在【我的文章】里。



三、SVG制作點擊展開效果


制作這個效果前,我們先對SVG動畫設置版面有個初步了解。大家可以點擊下面圖片,詳細查看。



要制作這個效果,第一頁我們把類型設置為圖片,上傳點擊前的圖片。




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



圖片區(qū)域:

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

覆蓋是指圖片如果無法剛好鋪滿畫布,則會自動裁去超出的部分。




然后設置動畫效果為展開。



點擊預覽/編輯圖文-編輯圖文




在這里會調用出一個系統(tǒng)編輯器,我們要將事先準備好的文章打開。




完成編輯后,你可以調整動畫時長,也就是展開這篇文章所需要的時間。數(shù)值越大,動作越慢。



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




- END -


點擊135編輯器獲取更多資訊


文章申明:本文章轉載自互聯(lián)網公開渠道,如有侵權請聯(lián)系我們刪除
文章評價
登錄后可以評論
立即登錄
小伍資深編輯
共638篇文章
最近文章
更多
  • 雙十二電商活動宣傳排版素材(電商商品促銷推廣模版樣式)
  • 乞巧節(jié)微信公眾號推文排版素材(愛情浪漫活動推廣文案)
  • 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
  • 八一建軍節(jié)紀念日推文排版樣式(光輝歷程文案宣傳模版)
比格設計
熱門工具
135編輯器
領先的在線圖文編輯平臺原創(chuàng)樣式素材,一鍵套用
筆格設計
受歡迎的在線作圖網站,新媒體配圖、手機海報應有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營銷、私域流量運營——站式營銷管理平臺
推薦文章
用戶運營平臺產品設計指南
淺談用戶運營中的用戶分層
內容運營:戴上寫作的六頂思考帽
5000字方法論:4個細節(jié),決定私域能不能賺錢
一個案例說明白用戶分析怎么用
22條視頻,漲粉12.6萬,一個女孩子在抖音靠洗車也能月入過萬!
高價值社群的5大核心關鍵
抖音賬號內容自檢清單!
決定離職后,3天拿到offer的總結與反思!
【135早資訊】:教育部將徹查教材插圖問題;抖音6月1日起將對本地生活商家收取服務費
熱門素材樣式
運營導航
運營工具
分享到