【SVG效果】春季踏青实操

本文介绍了滑动SVG的一种创新玩法——左右交错滑开再点击展开的效果,该效果具有高度互动性和创意性,在许多知名品牌推广文章中广泛应用。这款SVG组件通过让用户左右滑动屏幕以拨开人群等元素,进而点击后展现更多内容,适用于多种主题场景,如春日踏青等。

滑动SVG新玩法

左右交错滑开

嗨喽,宝子们

今天三儿给大家带来了

滑动SVG的新玩法

左右交错滑开再点击展开效果

此款效果在众多大牌推文中

都出现过

很适合用来做创意

那么我们话不多说

一起来看看吧



1.效果展示


·
·
·

·


·

<左右滑动拨开人群再点击展开>



此款SVG效果的名称为左右交错滑开再点击展开,ID:291,在很多大牌推文中都有出现过,实用性极高。是集超高互动性和创意于一体的SVG组件。


就拿上面三儿所展示的例子来说吧,现在正值春季,是旅游踏青的好时节,三儿就想到用此SVG与春日踏青主题结合玩创意。


在游玩的过程中自然少不了人山人海的场面了,所以我在滑动部分就想到了用4组插画人物做引导,以“拨开人群”为小巧思,吸引用户停留并进行互动。


小伙伴们也可以按照此思路进行发散,在滑动部分除了放插画人物,也可以放其他元素来做创意,只要跟主题相契合,都会很出彩。




2.操作教程展示


首先我们需要进入到SVG编辑器中,在【滑动效果】中搜索关键词:左右交错滑开,或者是输入ID:291。



将此效果放入编辑区域后,就需要我们添加相应的图片。此效果由三个部分组成,底图、滑动图以及展开后的内容。



底图和滑动图部分的图片宽高尺寸需要保持一致。


接下来三儿要着重给大家讲解一下滑动图的设置问题。


滑动图部分>>


滑动图需要用到PNG格式,即滑动元素的背景应该是透明的。



该组件的滑动方向的顺序是按照左右或者右左依次交替变化的,所以在【滑动初始方向位置】的选择上需要根据你第一个想要滑动的元素方向为准。



将所有滑动图放好后,就可以给底图设置触发点击展开的区域,拖拽红色部分即可。



展开后的内容编辑,就可以根据你自己的需要来进行自由搭配,可以放无缝图或者轮播、滑动SVG,跟编辑普通的点击展开效果做法类似。





以上就是三儿分享的全部内容了

眼睛会了可不行

看完还得勤加练习哦

如果觉得还不错

记得给三儿点个赞+在看哦


最近咱们的春日活动正在进行中

现在下单

即可获得超多福利

扫描下方二维码

即可领取




END




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