很多品牌的图文排版，每次必用「点击展开」的交互效果。

但每次「点击展开」的效果并不完全相同。

这次向大家介绍一种看似简单，但不一样的花样展开效果。来看看下面这些案例感受一下吧。

 

*素材来自沪上阿姨《新品！维C天花板「超顶刺梨」登场！》

点击向下移出切换图片后展开：

 

*素材来自深蓝汽车DEEPAL《深蓝汽车上海车展首秀，都「秀」了些什么》

组合：点击向下移出切换图片+展开(有触发区)

编号：10996（组合）

点击向左、向右移出切换图片后展开：

 

                   

                   

                   

                   

                   

                   

*素材来自华洛芙Wellendorff《因爱转动》

组合：点击向左移出切换图片+展开(有触发区)

编号：10993（组合）

组合：点击向右移出切换图片+展开(有触发区)

编号：10994（组合）

点击指定触发区，原本的图片可以从上、下、左、右四个方向移出，切换新的图片并自动展开剩余的内容。

上述案例效果使用 iPaiban Pro 黑科技编辑器的对应组合即可实现，相较于常见的点击切换图片，这种点击移出切换图片的方式，给人一种揭示重大消息或内容的感觉。

四个方向的制作流程一致，均支持设置点击触发区域、图片的移出切换时长和图文的展开时长。

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com

组合：点击向上移出切换图片+展开(有触发区)

编号：10995（组合）

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。

● SVG 黑科技交互排版👇🏻

 

如需定制 SVG 黑科技排版，请点此查看定制流程和套餐，低至500元/篇。