【SVG效果】春季踏青实操
本文介绍了滑动SVG的一种创新玩法——左右交错滑开再点击展开的效果，该效果具有高度互动性和创意性，在许多知名品牌推广文章中广泛应用。这款SVG组件通过让用户左右滑动屏幕以拨开人群等元素，进而点击后展现更多内容，适用于多种主题场景，如春日踏青等。
嗨喽，宝子们
今天三儿给大家带来了
滑动SVG的新玩法
左右交错滑开再点击展开效果
此款效果在众多大牌推文中
都出现过
很适合用来做创意
那么我们话不多说
一起来看看吧
<左右滑动拨开人群再点击展开>
此款SVG效果的名称为左右交错滑开再点击展开，ID：291，在很多大牌推文中都有出现过，实用性极高。是集超高互动性和创意于一体的SVG组件。
就拿上面三儿所展示的例子来说吧，现在正值春季，是旅游踏青的好时节，三儿就想到用此SVG与春日踏青主题结合玩创意。
在游玩的过程中自然少不了人山人海的场面了，所以我在滑动部分就想到了用4组插画人物做引导，以“拨开人群”为小巧思，吸引用户停留并进行互动。
小伙伴们也可以按照此思路进行发散，在滑动部分除了放插画人物，也可以放其他元素来做创意，只要跟主题相契合，都会很出彩。
首先我们需要进入到SVG编辑器中，在【滑动效果】中搜索关键词：左右交错滑开，或者是输入ID：291。
将此效果放入编辑区域后，就需要我们添加相应的图片。此效果由三个部分组成，底图、滑动图以及展开后的内容。
底图和滑动图部分的图片宽高尺寸需要保持一致。
接下来三儿要着重给大家讲解一下滑动图的设置问题。
滑动图需要用到PNG格式，即滑动元素的背景应该是透明的。
该组件的滑动方向的顺序是按照左右或者右左依次交替变化的，所以在【滑动初始方向位置】的选择上需要根据你第一个想要滑动的元素方向为准。
将所有滑动图放好后，就可以给底图设置触发点击展开的区域，拖拽红色部分即可。
展开后的内容编辑，就可以根据你自己的需要来进行自由搭配，可以放无缝图或者轮播、滑动SVG，跟编辑普通的点击展开效果做法类似。
以上就是三儿分享的全部内容了
眼睛会了可不行
看完还得勤加练习哦
如果觉得还不错
记得给三儿点个赞+在看哦
最近咱们的春日活动正在进行中
现在下单
即可获得超多福利
扫描下方二维码
即可领取
立即登录
