大牌同款SVG组件推荐 - 135编辑器零代码趣味排版教程

135编辑器SVG组件更新:地图游走探索、产品细节点击放大、逆向滑动等交互效果解析,适配青年用户及品牌推文场景。提供组件ID及使用技巧,零代码实现大牌同款动态排版,解决用户组件选择与场景应用难题,提升推文趣味性与互动性。含GUCCI等案例演示,帮助快速掌握效果落地方法。


大牌同款趣味排版


0代码超简单让你的推文趣味满满

135SVG编辑器上新组件推荐

SVG组件推荐

写在前面

最近有不少朋友反馈,每每进到SVG编辑器看到琳琅满目效果组件,有些「不知所措」不知道在什么场景下可以使用什么样的组件,同时不少朋友平日里只用自己熟悉的效果,有很多效果未曾探索。三儿觉得有些可惜,于是想要给大家展示我们近期上新不错的效果同时搭配大牌案例,让大家对组件效果有一个更直观的感受,那么就进入我们今天SVG组件推荐第一期吧。


01
地图游走探索

0E0F0098-0BF7-432C-A80C-5022C339EE5A_compressed.gif

《春天的周三,最适合翘班》

点击查看



这篇是由135平台带来的春日地图游走,利用公园场景,用户手动滑动地图探索预设点位,点击后弹出图片,展示更丰富的信息内容。该SVG组件与用户交互性强,需要读者能够滑动探索,所以更适合用户画像为青年人的账号,探索、接受能力更强,面对年纪偏大的用户更适宜交互简单或无交互的排版方式。



组件效果

多区域无限点击弹出/点击收回(底层自由滑动)

组件ID:970

需要在SVG编辑器中搜索使用

*注意点击区域不要和返回触发区重叠,同时建议大家完成该效果制作后选择右上角「导出」「复制代码到135编辑器」中,给全文设置一个地图同色背景,这样用户在滑动时不会有白底露出。


image.png



02
产品细节放大

53741D52-6608-4A3A-AA1B-4B6A27434BDC_compressed.gif

《BIondie风格演绎法》

点击查看原文


如何展示产品细节?GUCCI给了我们一个不错的答案,利用点击放大效果,巧妙展示商品细节,同时再次点击回到原尺寸,达到细节与整体两手抓,该效果不仅适合商品展示,对于需要细节放大的地方都能胜任如动植物某一特征、产品某处详情等。


01
组件效果

点击放大点击恢复图片(自定义放大区)

组件ID:972

需要在SVG编辑器中搜索使用


*注意点击区域不宜太小,这样会使图片放得过大导致图片不清晰。



03
逆向滑动

63184f78-55de-4373-8c01-bb987fc5d738_compressed.gif

《关乎「快乐」的三十八条祝福》

点击查看原文


当我们习惯了使用向上滑动,不如换个视角选择逆向滑动,至本就给大家换了换口味,逆向上滑来点不一样的,会有让人眼前一亮的感觉。


01
组件效果

竖向逆向滑动

组件ID:971

需要在SVG编辑器中搜索使用

*该效果建议偶尔使用。



以上就是三儿

想要给大家推荐的SVG组件

所有组件均在SVG编辑器使用

https://www.135editor.com/svgeditor/

大家觉得还不错的话

记得给三儿一个小心心

大家还有什么想看想学的

记得在评论区留言噢






·



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