公众号推文新技巧: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编辑器
立即登录