可以看出，这个效果分为3层图片，背景层和前景层图片不动，中间层跟随手指向上滑动，并且中间层不是纯图片，还能嵌套其他交互效果。
下面一起看下排版教程吧。
详细教程：
工具：i排版SVG编辑器，网址：SVG.iPaiban.com
组合：上滑组合
编号：11400（组合）
组件：红包封面-图片
编号：11137（组件）
第1步：选择组合
登录i排版SVG编辑器后，点击编辑器左侧「组合」按钮，直接在搜索框中搜索「上滑组合」组合或者搜索组合编号11400，点击选择。
第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。
在组合编辑模式中，左侧为「滑动布局」设置区域，右侧根据需要还可选择上传遮罩图和背景图。
第3步：上传遮罩图和背景图
遮罩图和背景图根据需要可传也可不传，本文案例这篇需要上传遮罩图和背景图，点击「换图」按钮分别上传即可。两张图片尺寸一致。
第4步：设置滑动内容
「滑动内容」不局限于单纯的无缝图，还可以嵌套使用各种交互效果组件。
需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：
本文案例这篇主要用到了「全能无缝图」组件（编号：10028）和「红包封面-图片」组件（编号：11137）。
注意，上滑效果滑动范围的大小，由「滑动内容」中第1个组件的图片尺寸决定。所以我们需注意第1个组件的切图大小，另外步骤3中上传的背景图，尺寸最好与第1个组件的图片尺寸保持一致。
第5步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」编辑模式来到首页。
点击最右侧「预览草稿」预览大概效果，效果满意后接着点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
制作SVG交互图文认准i排版SVG编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端谷歌浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。
新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。 返回搜狐，查看更多