*素材来自广汽本田《2023年度回忆杀！快来解锁你与广汽本田的独家记忆》

该效果分为3层图片，背景层和前景层图片不动，中间层跟随手指向上滑动，并且中间层并不是纯图片，还包含了其他一些交互内容。

我们可以使用 iPaiban Pro 黑科技编辑器来实现，在编辑器组合中搜索关键词「上滑组合」就能看到所用的同款效果组合。

其中还有自动对齐、三层的上滑组合可以选择。

以广汽本田的效果为例，一起看下如何实现吧。

点击「编辑组合」，进入组合编辑模式。

遮罩图和背景图根据需要可传也可不传，广汽本田这篇需要上传遮罩图和背景图，点击「换图」按钮分别上传即可。两张图片尺寸一致。

「滑动内容」不局限于单纯的无缝图，还可以嵌套使用各种交互效果组件。

需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。

添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：

广汽本田这篇主要用到了「全能无缝图」组件（编号：10028）和「超链接-图片(无角标)」组件（编号：10033 ）。

注意，上滑效果滑动范围的大小，由「滑动内容」中第1个组件的图片尺寸决定。所以我们需注意第1个组件的切图大小，另外步骤3中上传的背景图，尺寸最好与第1个组件的图片尺寸保持一致。

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

iPaiban Pro 四周年优惠活动进行中会员费用迎来首次大降价，价格是之前的5折不到！

 

                                                       

                                               

● SVG 黑科技交互排版👇🏻

 

如需定制 SVG 黑科技排版，请添加玉兔微信（ID：playhudong15）沟通咨询。