公众号推文新技巧:SVG滑动效果提升互动体验

增强公众号推文吸引力的秘诀!本文深入探讨了三种SVG滑动效果组件,包括动态黑白变彩色、滑动揭示底图和双层滑动背景,专为公众号推文设计。这些易于实现的SVG效果,无需复杂图像处理技能,即可显著提升用户互动和阅读参与度。掌握这些技巧,让您的公众号推文在众多内容中脱颖而出。

说到滑动,大家是不是脑海中第一想到的便是左右滑动图片?左右滑动展示图片是【滑动】最基础的效果,难道除了这个效果,【滑动】就一无是处了吗?非也,在【滑动】的基础属性上,我们还衍生出了其他效果组件:左右滑动模糊变清晰 | 黑白变彩色;滑动见底图;背景图固定前景自动居中双层滑动等,今天我们着重讲解这三个视觉效果都不错的组件。



估计有不少朋友说,你这个效果不就是放两张图,一张黑白一张彩色吗?这有什么难的。的确,实现这个效果我们可以准备一张彩色和黑白图片。但是鉴于许多小伙伴不擅长使用ps,也不想麻烦设计师,还想要实现黑白变彩色就可以使用这个组件:左右滑动模糊变清晰 | 黑白变彩色 组件ID:266


·

·

向左滑动变色→

此组件,你仅需上传一张彩色图片,组件内置了黑白滤镜和模糊滤镜,你可以根据自己的需求调整数值大小。


·

向左滑动模糊黑白变清晰彩色→



1.进入svg编辑器,在编辑器左侧找到【svg编辑器】点击进入

2.在【互动效果中】输入组件ID:266;

3.点击组件到编辑区域,上传图片并调整【模糊】【黑白】参数;

4.【导出代码】复制代码到135编辑器或是到微信后台。





如果你想要营造一种【探秘】【悬疑】的氛围,想要让用户自己去滑动寻找你隐藏的彩蛋,那么这个组件效果你一定不能错过。滑动见底图,组件ID:261


·

注:黑色遮罩的透明度由用户自行设置



1.进入svg编辑器,在编辑器左侧找到【svg编辑器】点击进入

2.在【互动效果中】输入组件ID:261;

3.点击组件到编辑区域,上传【背景图】和【滑动图】可设置滑动宽度;

4.【导出代码】复制代码到135编辑器或是到微信后台。





若是想要实现【换装】【变脸】前后有一定反差效果的,可以使用背景图固定前景自动居中双层滑动 ID:198



·
·



1.进入svg编辑器,在编辑器左侧找到【svg编辑器】点击进入

2.在【互动效果中】输入组件ID:198;

3.点击组件到编辑区域,上传【背景图】和【滑动图】可自定义设置滑动方向、跳转链接、小程序;

4.【导出代码】复制代码到135编辑器或是到微信后台。




以上就是三儿为大家

带来的基于【滑动】效果的svg组件

当然组件还有很多

大家还有什么想要了解的

可以在评论区留言

我们一起探索更多有趣的玩法



更多有趣好玩的内容

尽在135编辑器





文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到