SVG特效公众号三层滑动怎么设置?
本文详细介绍了如何利用135插件制作三层上滑SVG特效,通过固定背景图和顶层图,中间层滑动的方式,打造出独特的视觉效果。文章从采集图片、分析推文结构开始,逐步指导读者如何进入SVG编辑器、上传素材图,并最终导出应用到公众号推文中。
朋友们大家好,我是三儿。
最近有朋友问三儿:
“最近看到一个滑动很神奇,视觉效果绝了我贫瘠的语言无法描绘请看VCR(视频录制转GIF)👇”
👉查看原文《倒计时!流浪地球启程!》
这时候有朋友会说:这个滑动有啥难的,这看起来不就像是一个双层滑动嘛,三儿故弄玄虚
真的是这样吗?
这里我们借助135插件,获取原文图片进行研究。
图片下载后,我们就能比较清晰地看到整篇推文的结构了。
“你这我也看不出个啥呀?”
怎么样现在是不是直观地看到了这篇文章的结构?
没错这篇文章,并不是一个简单的双层滑动,而是一个背景图固定、顶层图固定,中间层滑动的三层上滑。
如果我们想要制作这样的效果应该如何制作呢?
在135编辑器左侧找到SVG编辑器,点击【进入SVG编辑器】或是直接搜索三层上滑或组件ID:31
三儿这里选择非居中的三层上滑,点击进入SVG编辑器。
进入SVG编辑器后,我们要养成习惯先看素材要求,这样可以减少许多不必要的麻烦。
我们这个案例【地球】是一直固定不变的,所以地球这个素材就是我们的固定图。
之后我们就根据我们的素材内容,上传背景图和顶层图。
注意:如果你某个地方顶部没有内容显示,可以只上传背景图不上传顶层图。
如果你觉得高度显示太少,可以自定义高度。
后面我们就是不断地上传背景图+顶层图即可。
完成后我们可以选择【导出】把内容复制到135编辑器或是微信公众号后台,或是直接通过保存同步到微信公众号后台。
三儿说:
当然三层上滑你不仅可以竖向滑动,也可以横向滑动(我们在上传图片素材时提前进行旋转)再搭配好的设计、创意、文案内容就能够让你的作品脱颖而出,闪耀星空。
相信聪明的你
已经学会了这个效果了
眼睛学会了记得动手操练下喔
如果你还有什么想看想学的
记得在评论区留言哦
立即登录