SVG「多段伸长」和「伸长嵌套」到底有什么区别?

SVG「多段伸长」和「伸长嵌套」到底有什么区别?

多段伸长


每次点击后图文拉伸,直至出现下一个触发热区,再次点击图文可继续拉伸。具体案例可参考喜茶发布的《 巨峰回归,多肉葡萄灵感融合 》。

效果预览

多次点击实现图文连续伸长。

同款模版

该案例对应的模版位置

想实现同样效果?即刻进入 E2.COOL 黑科技编辑器,专业级会员和企业级会员即可在 「伸长动画」 大类模版中选择 「多段伸长(默认2段)」 畅快体验,如需调整伸长总数请使用筛选器,具体操作请参看下方视频。

https://www.zhihu.com/video/1486749569665294336


伸长嵌套


在第一次伸长展开后,内文中嵌套了多组伸长组件,且伸长组件并列排布互不影响。具体案例可参考积家发布的《 一起云上「听」展 》。

效果预览

点击图片后关联图文拉长,显露出内层的数段并列伸长组件。

同款模版

该案例对应的模版位置

想实现同样效果?即刻进入 E2.COOL 黑科技编辑器,专业级会员和企业级会员即可在 「企业级专区(伸长)」 大类模版中选择 「伸长套伸长(默认2组-345px)」 畅快体验,如需调整伸长总数请使用筛选器,具体操作请参看下方视频。

https://www.zhihu.com/video/1486749916306911233


伸长堆叠


另外需要提及的是多组伸长组件并列排布,形成具有规律的行文结构。具体效果可查看局部气候调查组的《 新春百花争斗艳,元宵灯谜乐团圆 》,该文章采用多组逆向画面伸长结构揭开谜题和迷底,趣味感十足。

效果预览

多组逆向画面伸长组件,点击后内容同步下拉伸长。

现在,你能区分这些大神口中经常叨念的 SVG 模型了吗?如果还有其他日常交互图文排版中的困惑,欢迎通过评论或留言等形式告诉我们。小 E 将竭尽所能通过详细的图文发布为大家解答!


其他近期平台热门组件:

黑科技编辑器|三折页立体广告教程

黑科技编辑器 | 中心渐变教程

黑科技编辑器|依次出现教程

黑科技编辑器|大转盘抽奖教程

黑科技编辑器|连续撕纸教程

黑科技编辑器|密码解锁教程

黑科技编辑器|视差相册(横向8图)教程


任何公众号运营中的疑难杂症,都欢迎邀请我们回答哦。

这里是 黑科技编辑器 e2.cool ),会的比别人多一点。

编辑于 2022-04-26 18:14