公众号SVG互动创意排版效果教学

前段时间人民网公众号推了一个特别有意思公众号SVG互动创意的文章,文章一开始展现的是一副卷轴,用文字引导读者,点击一下,卷轴再徐徐打开。极具美感和创意,一时间刷遍了大家的朋友圈。大家一边感叹内容精美,一边也为这种创意文章的形式感到惊喜。




SVG编辑器入口:http://www.135editor.com/svgeditor/


一、SVG互动效果展示


那么这种公众号互动创意排版是如何制作的呢?其实这是利用SVG代码制作而成的,在微信公众号后台是无法直接实现这样的效果,必须要专业的编程人员来敲代码。不过,最近小编发现了一个工具,不用学习代码,也能够让你轻松实现这样的效果,下面一起跟着小编来学习SVG互动排版效果教学吧。


效果示范↑

点击后,展开画面


在画面上,点击箭头后,文章会自动打开。这种效果我们可以利用135编辑器轻松实现,接下来就是详细的操作步骤,大家一定要仔细看好了!


二、公众号SVG互动准备工作


1、首先登录135编辑器,将菜单栏切换成【专业版】



2、在基础布局,找到SVG布局,点击样式,放置在135编辑器编辑区内。



3、在编辑区内点击样式,在弹出的菜单栏中点击【SVG布局动画】



注意:在制作这个效果前,你先准备好点击后展开的文章内容。并保存在【我的文章】里。



三、SVG制作点击展开效果


制作这个效果前,我们先对SVG动画设置版面有个初步了解。大家可以点击下面图片,详细查看。



要制作这个效果,第一页我们把类型设置为图片,上传点击前的图片。




由于这张图比例和SVG默认的比例是不同的,导致两边有多余的白色,我们可以条则会那个一下宽高比,使之看起来差不多即可。图片区域,选择覆盖。



图片区域:

包含是指图片如果无法刚好铺满画布,则留出一定空白。

覆盖是指图片如果无法刚好铺满画布,则会自动裁去超出的部分。




然后设置动画效果为展开。



点击预览/编辑图文-编辑图文




在这里会调用出一个系统编辑器,我们要将事先准备好的文章打开。




完成编辑后,你可以调整动画时长,也就是展开这篇文章所需要的时间。数值越大,动作越慢。



设置完毕后,点击右上角的【预览】查看整体效果。预览无误后,点击完成即可。如果需要发送到手机上预览,可以用编辑器的【手机预览】功能。




- END -


点击135编辑器获取更多资讯


文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
小伍资深编辑
共638篇文章
最近文章
更多
  • 双十二电商活动宣传排版素材(电商商品促销推广模版样式)
  • 乞巧节微信公众号推文排版素材(爱情浪漫活动推广文案)
  • 二十四节气立秋图文排版素材(金黄色系立秋推文文案模版)
  • 八一建军节纪念日推文排版样式(光辉历程文案宣传模版)
比格设计
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
比格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
管小助
企业营销、私域流量运营——站式营销管理平台
推荐文章
用户运营平台产品设计指南
浅谈用户运营中的用户分层
内容运营:戴上写作的六顶思考帽
5000字方法论:4个细节,决定私域能不能赚钱
一个案例说明白用户分析怎么用
22条视频,涨粉12.6万,一个女孩子在抖音靠洗车也能月入过万!
高价值社群的5大核心关键
抖音账号内容自检清单!
决定离职后,3天拿到offer的总结与反思!
【135早资讯】:教育部将彻查教材插图问题;抖音6月1日起将对本地生活商家收取服务费
热门素材样式
运营导航
运营工具
分享到