SVG创意推文—『点击开窗』教程
最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军。
嘿,胖友们大家好呀,我是三儿。
好久不见,胖友们有没有想我呀!最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军。之前人民日报推了一篇《点亮武汉》在当时引起了不小的轰动,三儿也连忙出了一篇教程。
前两天,新华社又推了一篇『点击开窗』的推文,用户可以点击打开窗户,看到各地的美景。
为了让胖友们更直观的感受推文的效果,三儿将这些图做成了动图,胖友们可以通过滑动来查看哦!
<左右滑动查看更多>
怎么样,是不是超级好玩,那么今天,三儿就来教你们如何制作这种点击滑动的效果吧!
话不多说,教程来咯~
点击开门样式
ID:98647
【样式作用】:点击窗户,样式两侧内容会自动滑开,显示出底部的内容,可以搭配无缝样式制作出更多有趣味性的推文。
【使用说明】:新版的SVG样式均可以在『动画』按钮中完成所有的设置。
【这些样式也可以用这个教程哦】样式ID:98646
👈点击有惊喜哦👉
图片切换样式ID:98647
由于编辑器升级了专业版,简化了部分svg样式的操作流程,使得修改svg样式大部分参数无需再通过html代码实现。本点击样式所有参数都可通过动画设置调整。
将编辑器切换到专业版模式,点击样式区域弹出对话框,在【全局样式】中点击动画按钮,开始修改SVG样式参数。
这里需要注意的是:不是所有样式都有动画选项哦,只有SVG样式会有动画显示!
2.切换完成后,我们就可以对样式进行修改了,在左侧搜索样式ID『98647』,将样式插入至编辑器中。
这里需要注意的是:编辑时请不要点击图片区域,以防触发动画保存失效。
3.接下来我们要准备三张图片,两张开门的图片以及需要展示的背景图,这里需要注意的是,滑动的两张图合在一起时需要和底部的图片宽高一致。
▲滑动图片和底图展示
如果胖友们想直接使用我们样式里的滑动图片,那么需要注意的是,将底部图片修改为样式素材中底图的尺寸即可。
胖友们可以在这里查看底图的尺寸哦!
4.点击选中样式(在样式周围出现红框时,才算选中哦!),在弹出的菜单栏中,选择『动画』按钮,进入动画设置界面。
这里需要注意的是:只有SVG样式才会有动画按钮哦,普通的样式是没有动画按钮的!
5.在动画设置界面,我们就可以对样式的内容进行设置了,胖友们可以对顶部的文字,背景图片,以及左右两侧滑动图片进行更换。
在更换左右两侧图片时,我们需要注意的是,在上传图片界面需要选择『自由』进行上传,才会让图片更好的适配哦!
6.设置完所有内容以后,胖友们可以在右侧的预览框中进行测试,也可以返回编辑器界面,点击右侧菜单栏中的『手机预览』进行测试。
注意事项:
这里需要注意的是,由于微信后台限制,所以排版完成后的推文需要使用保存同步功能,如果使用复制粘贴会导致样式失效哦!
现在SVG推文这么火,还不赶紧学会了给用户们露一手?
想学习更多的SVG样式吗?想制作出更好玩的互动排版吗?
那还等啥,赶快去评论区留言,说出你最喜欢用的SVG样式,我们将在评论区抽出10位胖友,送出岩植主编的《SVG变形记》课程哦!
好啦,今天的教程就到这里啦
胖友们学会了吗?
如果你还有关于其它样式的疑问
都可以留言告诉三儿哦
点击https://www.135editor.com/users/invite/ddb12a17ce400c35fe041d275a578351,注册135编辑器,即可获得7天VIP会员
立即登录